- Bootstrap- Modal对话框如何在关闭时触发事件
- Linda 发表于 2015/7/5 11:34:00 | 分类标签: Modal Bootstrap 弹框
- 下表列出了模态框中要用到事件。这些事件可在函数中当钩子使用。
事件 描述 实例 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 () { // 执行一些动作... })实例
下面的实例演示了事件的用法：
234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556<!DOCTYPE html><html><head><title>Bootstrap 实例 - 模态框（Modal）插件事件</title><linkhref="/bootstrap/css/bootstrap.min.css"rel="stylesheet"><scriptsrc="/scripts/jquery.min.js"></script><scriptsrc="/bootstrap/js/bootstrap.min.js"></script></head><body><h2>模态框（Modal）插件事件</h2><!-- 按钮触发模态框 --><buttonclass="btn btn-primary btn-lg"data-toggle="modal"data-target="#myModal">开始演示模态框</button><!-- 模态框（Modal） --><divclass="modal fade"id="myModal"tabindex="-1"role="dialog"aria-labelledby="myModalLabel"aria-hidden="true"><divclass="modal-dialog"><divclass="modal-content"><divclass="modal-header"><buttontype="button"class="close"data-dismiss="modal"aria-hidden="true">×</button><h4class="modal-title"id="myModalLabel">模态框（Modal）标题</h4></div><divclass="modal-body">点击关闭按钮检查事件功能。</div><divclass="modal-footer"><buttontype="button"class="btn btn-default"data-dismiss="modal">关闭</button><buttontype="button"class="btn btn-primary">提交更改</button></div></div><!-- /.modal-content --></div><!-- /.modal-dialog --></div><!-- /.modal --><script>$(function () { $('#myModal').modal('hide')})});</script><script>$(function () { $('#myModal').on('hide.bs.modal', function () {alert('嘿，我听说您喜欢模态框...');})});</script></body></html>
- Bootstrap- Modal对话框如何在关闭时触发事件
- Linda 发表于 2015/7/5 11:34:00 | 分类标签: Modal Bootstrap 弹框
1088
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
