Bootstrap- Modal对话框如何在关闭时触发事件

http://www.hello-code.com/blog/Bootstrap/201507/5233.html

下表列出了模态框中要用到事件。这些事件可在函数中当钩子使用。

事件	描述	实例
show.bs.modal	在调用 show 方法后触发。	$('#identifier').on('show.bs.modal', function () { // 执行一些动作... })
shown.bs.modal	当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。	$('#identifier').on('shown.bs.modal', function () { // 执行一些动作... })
hide.bs.modal	当调用 hide 实例方法时触发。	$('#identifier').on('hide.bs.modal', function () { // 执行一些动作... })
hidden.bs.modal	当模态框完全对用户隐藏时触发。	$('#identifier').on('hidden.bs.modal', function () { // 执行一些动作... })

实例

下面的实例演示了事件的用法：

2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

< html > < head > < title >Bootstrap 实例 - 模态框（Modal）插件事件 title > < link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet" > < script src = "/scripts/jquery.min.js" > script > < script src = "/bootstrap/js/bootstrap.min.js" > script > head > < body > < h2 >模态框（Modal）插件事件 h2 > < button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal" > 开始演示模态框 button > < div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" > < div class = "modal-dialog" > < div class = "modal-content" > < div class = "modal-header" > < button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" >× button > < h4 class = "modal-title" id = "myModalLabel" > 模态框（Modal）标题 h4 > div > < div class = "modal-body" > 点击关闭按钮检查事件功能。 div > < div class = "modal-footer" > < button type = "button" class = "btn btn-default" data-dismiss = "modal" > 关闭 button > < button type = "button" class = "btn btn-primary" > 提交更改 button > div > div > div > div > < script > $(function () { $('#myModal').modal('hide')})}); script > < script > $(function () { $('#myModal').on('hide.bs.modal', function () { alert('嘿，我听说您喜欢模态框...');}) }); script > body > html >