1. 程式人生 > >Bootstrap之javascript插件---彈出框(模態框)Modal

Bootstrap之javascript插件---彈出框(模態框)Modal

boot mis out strong 設置 cnblogs true -o 分享圖片

簡介:

  彈出框是一個經常使用的組件,一般用於彈出提示信息,確認信息,表單內容。

完整結構分析(可以沒有頭部和底部):

技術分享圖片

代碼示例:

<!-- 彈出框的頭部 -->
    <div class="modal fade">  
        <div class="modal-dialog">  
            <div class="modal-content">  
                <div class="modal-header">  
                    <button 
type="button" class="close" data-dismiss="modal"> <span aria-hidden="true">&times;</span><span class="sr-only">Close</span> </button> <h4 class="modal-title">Modal title</h4> </
div> <!-- 彈出框的內容 --> <div class="modal-body"> ... </div> <!-- 彈出框的底部 --> <div class="modal-footer"> <!-- 設置了data-dismiss="modal"屬性,就可以關閉該彈出框 --> <button type="button"
class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>

※ 當需要為某個元素設置彈出框時,為該元素設置 data-toggle="modal"(激活模態框屬性),data-target="#about"(用於指向被控制的模態框)此處也不是特別理解,如有高見請各位小夥伴不吝賜教。

Bootstrap之javascript插件---彈出框(模態框)Modal