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