Bootstrap3 模態對話框的事件

模態對話框的事件

Bootstrap爲模態對話框插件提供了 5 個事件，通過監聽這些事件，可以對特定操作階段的用戶行爲作出響應。這些事件及含義見表 4‑2。

表 4‑2 modal插件的事件及含義

事件	含義
show.bs.modal	show方法調用之後，立即觸發該事件。如果是通過點擊某個作爲觸發器的元素，則此元素可以通過event.relatedTarget屬性進行訪問。
shown.bs.modal	當模態對話框已經對用戶可見（並且過渡效果執行完畢）之後，觸發該事件。如果是通過點擊某個作爲觸發器的元素，則此元素可以通過event.relatedTarget屬性進行訪問。
hide.bs.modal	hide方法調用之後，立即觸發該事件
hidden.bs.modal	當模態對話框已經被隱藏（並且過渡效果執行完畢）之後，觸發該事件
loaded.bs.modal	從遠端的數據源加載完數據之後，立即觸發該事件。

如果開發人員希望定製模態對話框的功能，就可以通過JavaScript監聽這些事件，來執行相應的操作。如：

1. <script>
2.   $('#myModal').on('show.bs.modal', function () {
3.    alert("開始顯示模態框。");
4.   });
5.   $('#myModal').on('shown.bs.modal', function () {
6.      alert("模態話框已經顯示。");
7.   });
8.   $('#myModal').on('hide.bs.modal', function () {
9.      alert("開始隱藏模態框。");
10.   });
11.   $('#myModal').on('hidden.bs.modal', function () {
12.      alert("模態框已經隱藏。");
13.   });
14.   $('#myModal').on('loaded.bs.modal', function () {
15.      alert("遠端數據加載完成。");
16.   });
17. </script>

關於作者

歪脖先生，十五年以上軟件開發經驗，酷愛Web開發，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML寶典》、《揭祕CSS》、《Less簡明教程》、《JSON教程》、《Bootstrap2用戶指南》、《Bootstrap3實用教程》，並全部在 GitHub 上開源。