模態(tài)彈窗

觸發(fā)元素基本結(jié)構(gòu)：

內(nèi)容元素基本結(jié)構(gòu)：

 <div class="modal fade" id="modal">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button class="close" data-dismiss="modal">&times</button>
 title
 </div>
 <div class="modal-body">
 this is main content
 </div>
 <div class="modal-footer">
 <button class="btn btn-default" data-dismiss="modal">cancel</button>
 <button class="btn btn-success">ok</button>
 </div>
 </div>
 </div>
 </div>

　　觸發(fā)元素的關(guān)鍵屬性為data-target和data-toggle,data-target和具體的彈窗互相對應(yīng)，data-toggle="modal"提供了HTML觸發(fā)條件

　　彈窗內(nèi)容要正確嵌套，彈窗的出現(xiàn)和隱藏的動(dòng)畫要設(shè)置在最外層

　　可以通過modal-sm和modal-lg改變彈窗的大小，這兩個(gè)class要設(shè)置在modal-dialog那一層

　　modal-header中的關(guān)閉按鈕的關(guān)鍵屬性為class="close"該class實(shí)現(xiàn)了樣式的改變，data-dismiss="modal"提供了HTML關(guān)閉的觸發(fā)條件

模態(tài)彈窗提供了四個(gè)屬性，這四個(gè)屬性通常設(shè)置在模態(tài)彈窗上class="modal"那一層(內(nèi)容DOM的最外層)，四個(gè)屬性分別為：

　　1.data-backdrop:是否包含一個(gè)背景，默認(rèn)值為true同時(shí)單擊背景可以關(guān)閉模態(tài)窗，設(shè)置為data-backdrop="static"則單擊背景時(shí)不關(guān)閉，設(shè)置為backdrop="false"則不存在背景

　　2.data-keyboard:按下ESC時(shí)是否關(guān)閉模態(tài)窗默認(rèn)值為true即按下時(shí)關(guān)閉模態(tài)窗，設(shè)置為data-keyboard="false"則在點(diǎn)擊ESC時(shí)不再關(guān)閉模態(tài)窗(該屬性要想生效要在最外層設(shè)置屬性tabindex)

　　3.data-show:初始化時(shí)是否顯示默認(rèn)值為true即初始時(shí)顯示，data-show="false"則初始化時(shí)不顯示第一次點(diǎn)擊觸發(fā)元素準(zhǔn)備模態(tài)窗，在點(diǎn)擊一次開始顯示模態(tài)窗

　　4.href:加載其他內(nèi)容

JS使用方法

　　模態(tài)窗提供了四個(gè)事件：

　　1.show.bs.modal在顯示之前觸發(fā)

　　2.shown.bs.modal在顯示之后觸發(fā)

　　3.hide.bs.modal在隱藏之前觸發(fā)

　　4.hidden.bs.modal在隱藏之后觸發(fā)

使用方式為：

$("#modal").on("shown.bs.modal",function(){
 alert("already show")
})

　　如果我們在模態(tài)窗中使用了input表單元素，如果需要在每次顯示模態(tài)窗是input可以獲取焦點(diǎn)，就需要使用shown.bs.modal了

　　模態(tài)彈窗也提供勒三個(gè)參數(shù)：

　　1.toggle切換模態(tài)窗的顯示隱藏

　　2.show顯示模態(tài)窗

　　3.hide隱藏模態(tài)窗

使用方式為：

$("#modal").modal("show")

　　模態(tài)窗提供的四個(gè)屬性同樣可以通過JS方式來使用，用JS使用時(shí)四個(gè)屬性分別為：backdrop、keyboard、show、remote

　　使用方式為：

$("#modal").modal({
 backdrop:"static",
 keyboard:false,
 show:false
})

更多內(nèi)容請點(diǎn)擊專題《Bootstrap Modal使用教程》進(jìn)行學(xué)習(xí)，希望大家喜歡。

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附兩個(gè)精彩的專題：Bootstrap學(xué)習(xí)教程 Bootstrap實(shí)戰(zhàn)教程

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論