上一節,我們對JavaScript觸發模態彈出窗的屬性設置進行了介紹,現在我們接著對參數設置和事件設置進行介紹。
參數設置:
在Bootstrap框架中還為模態彈出窗提供了三種參數設置,具體說明如下:
參數 |
使用方法 |
描述 |
toggle |
$(“#mymodal”).modal(“toggle”) |
觸發時,反轉模態彈出窗的狀態。如果模態彈出窗是顯示的,則關閉;反之,如果模態彈出窗是關閉的,則顯示 |
show |
$(“#mymodal”).modal(“show”) |
觸發時,顯示模態彈出窗 |
hide |
$(“#mymodal”).modal(“hide”) |
觸發時,關閉模態彈出窗 |
事件設置:
模態彈出窗還支持四種類型的事件,分別是模態彈出窗的彈出前、彈出后,關閉前、關閉后,具體描述如下:
事件類型 |
描述 |
show.bs.modal |
在show方法調用時立即觸發(尚未顯示之前);如果單擊了一個元素,那么該元素將作為事件的relatedTarget屬性 |
shown.bs.modal |
該事件在模態彈出窗完全顯示給用戶之后(并且等CSS動畫完成之后)觸發;如果單擊了一個元素,那么該元素將作為事件的relatedTarget事件 |
hide.bs.modal |
在hide方法調用時(但還未關閉隱藏)立即觸發 |
hidden.bs.modal |
該事件在模態彈出窗完全隱藏之后(并且CSS動畫漂完成之后)觸發 |
調用方法也非常簡單:
$('#myModal').on('hidden.bs.modal', function (e) { // 處理代碼... })
我來試試:在右側代碼編輯器中試一試本小節新事件。
請驗證,完成請求
由于請求次數過多,請先驗證,完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報