Bootstrap为模态对话框插件提供了 5 个事件，通过监听这些事件，可以对特定操作阶段的用户行为作出响应。这些事件及含义见表 4‑2。
表 4‑2 modal插件的事件及含义 事件含义show.bs.modalshow方法调用之后，立即触发该事件。如果是通过点击某个作为触发器的元素，则此元素可以通过event.relatedTarget属性进行访问。shown.bs.modal当模态对话框已经对用户可见（并且过渡效果执行完毕）之后，触发该事件。如果是通过点击某个作为触发器的元素，则此元素可以通过event.relatedTarget属性进行访问。hide.bs.modalhide方法调用之后，立即触发该事件hidden.bs.modal当模态对话框已经被隐藏（并且过渡效果执行完毕）之后，触发该事件loaded.bs.modal从远端的数据源加载完数据之后，立即触发该事件。如果开发人员希望定制模态对话框的功能，就可以通过JavaScript监听这些事件，来执行相应的操作。如：
<script> $('#myModal').on('show.bs.modal', function () { alert("开始显示模态框。"); }); $('#myModal').on('shown.bs.modal', function () { alert("模态话框已经显示。"); }); $('#myModal').on('hide.bs.modal', function () { alert("开始隐藏模态框。"); }); $('#myModal').on('hidden.bs.modal', function () { alert("模态框已经隐藏。"); }); $('#myModal').on('loaded.bs.modal', function () { alert("远端数据加载完成。"); });</script>关于作者
歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。
