模態彈窗
觸發元素基本結構:
復制代碼 代碼如下:<button class="btn btn-success" data-target="#modal" data-toggle="modal">modal</button>
內容元素基本結構:
<div class="modal fade" id="modal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button class="close" data-dismiss="modal">×</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>
觸發元素的關鍵屬性為data-target和data-toggle,data-target和具體的彈窗互相對應,data-toggle="modal"提供了HTML觸發條件
彈窗內容要正確嵌套,彈窗的出現和隱藏的動畫要設置在最外層
可以通過modal-sm和modal-lg改變彈窗的大小,這兩個class要設置在modal-dialog那一層
modal-header中的關閉按鈕的關鍵屬性為class="close"該class實現了樣式的改變,data-dismiss="modal"提供了HTML關閉的觸發條件
模態彈窗提供了四個屬性,這四個屬性通常設置在模態彈窗上class="modal"那一層(內容DOM的最外層),四個屬性分別為:
1.data-backdrop:是否包含一個背景,默認值為true同時單擊背景可以關閉模態窗,設置為data-backdrop="static"則單擊背景時不關閉,設置為backdrop="false"則不存在背景
2.data-keyboard:按下ESC時是否關閉模態窗默認值為true即按下時關閉模態窗,設置為data-keyboard="false"則在點擊ESC時不再關閉模態窗(該屬性要想生效要在最外層設置屬性tabindex)
3.data-show:初始化時是否顯示默認值為true即初始時顯示,data-show="false"則初始化時不顯示第一次點擊觸發元素准備模態窗,在點擊一次開始顯示模態窗
4.href:加載其他內容
JS使用方法
模態窗提供了四個事件:
1.show.bs.modal在顯示之前觸發
2.shown.bs.modal在顯示之後觸發
3.hide.bs.modal在隱藏之前觸發
4.hidden.bs.modal在隱藏之後觸發
使用方式為:
$("#modal").on("shown.bs.modal",function(){ alert("already show") })
如果我們在模態窗中使用了input表單元素,如果需要在每次顯示模態窗是input可以獲取焦點,就需要使用shown.bs.modal了
模態彈窗也提供勒三個參數:
1.toggle切換模態窗的顯示隱藏
2.show顯示模態窗
3.hide隱藏模態窗
使用方式為:
$("#modal").modal("show")
模態窗提供的四個屬性同樣可以通過JS方式來使用,用JS使用時四個屬性分別為:backdrop、keyboard、show、remote
使用方式為:
$("#modal").modal({ backdrop:"static", keyboard:false, show:false })
如果大家還想深入學習,可以點擊這裡進行學習,再為大家附兩個精彩的專題:Bootstrap學習教程 Bootstrap實戰教程
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。