Bootstrap modal(模態窗)常用參數、方法和事件:
參數:
名稱 |
類型 |
默認值 |
描述 |
Backdrop |
Boolean或字符串“static” |
True |
True:有背景,點擊modal外部,modal消失。 False:無背景,點擊modal外部,modal不消失。 Static:有背景,點擊modal外部,modal不消失。 |
Keyboard |
Boolean |
True |
True:鍵盤上的esc按下關閉modal False:鍵盤上的esc按下不關閉modal |
Show |
Boolean |
True |
True:顯示modal False:不顯示modal |
方法:
.modal(options)
將頁面中的某內容作為模態窗激活。接受可選的參數object;
$(“#myModal”).modal();默認無參數
$(“#myModal”).modal({keyboard:false})
.modal(“toggle”)
手動打開或關閉模態窗。
$(“#myModal”).modal(“toggle”)
.modal(“show”)
手動打開模態窗
$(“myModal”).modal(“show”);
.modal(“hide”)
手動關閉模態窗
$(“myModal”).modal(“hide”);
事件:
事件類型 |
描述 |
Show.bs.modal |
Show方法調用之后立即出發該事件,如果是通過點擊某個作為觸發器的元素,則此元素可以通過事件的realatedTarget屬性進行訪問。 |
Shown.bs.modal |
此事件在模態窗已經顯示出來(並且同事在css過度效果完成)之后出發,如果通過點擊某個作為觸發器的元素,則此元素可以通過事件的relatedTarget屬性進行訪問。 |
Hide.bs.modal |
Hide方法調用之后立即出發該事件 |
Hidden.bs.modal |
此事件在模態窗被隱藏(並且同時在css過渡效果完成)之后出發 |
Loaded.bs.modal |
從遠端的數據源加載完數據之后出發該事件 |
事件調用示例:
$(“#myModal”).on(“show.bs.modal”,function(e){ //do something …… });