8.2.4 对话框事件
Bootstrap
的对话框支持如下事件。
事件 |
描述 |
show.bs.modal |
当对话框的show 方法被调用时立即触发该事件。如果是通过单击某个元素来触发对话框的显示,则可通过事件的relatedTarget 属性来访问该元素。 |
shown.bs.modal |
当对话框完全显示出来(且CSS 过渡效果执行完成)后触发该事件。如果是通过单击某个元素来触发对话框的显示,则可通过事件的relatedTarget 属性来访问该元素。 |
hide.bs.modal |
当对话框的hide 方法被调用时立即触发该事件。 |
hidden.bs.modal |
当对话框被完全隐藏(且CSS 过渡效果执行完成)时触发该事件。 |
loaded.bs.modal |
从远端的数据源加载数据之后触发该事件。 |
## 程序示例 ## |
|
通过上面这些事件,程序可在对话框的弹出过程中执行自己的代码。例如如下代码。 |
|
1 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 57 58 59 60 61 62
| <!DOCTYPE html> <html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> 对话框事件 </title> <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css"> </head>
<body> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> 单击我 </button> <div class="modal" tabindex="-1" role="dialog" id="myModal"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button class="close" type="button" data-dismiss="modal"> <span aria-hiden="true">×</span> </button> <h4 class="modal-title"></h4> </div> <div class="modal-body"> <p></p> </div> <div class="modal-footer"> <button class="btn btn-default" type="button" data-dismiss="modal"> 关闭</button> <button class="btn btn-primary" type="button">保存</button> </div> </div> </div> </div> <script type="text/javascript" src="../jquery-3.1.1.js"></script> <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript"> $('#myModal').on('show.bs.modal', function (event) { var src = event.relatedTarget.innerHTML; let modal = $(this); modal.find('.modal-title').html("【" + src + "】激发的对话框") modal.find('.modal-body p').html("<h4>对话框被显示出来了!</h4>"); }); </script> </body>
</html>
|
|
|
上述代码为对话框的show.bs.modal
事件绑定了事件监听器,这意味着当对话框显示时该事件监听函数将会被激发,该事件监听函数会修改对话框的内容。
原文链接: 8.2.4 对话框事件