小编典典

如何处理 Twitter Bootstrap 中的模态关闭事件?

all

在 Twitter
引导程序中,查看模态文档。我无法弄清楚是否有办法监听模式的关闭事件并执行一个函数。

例如,让我们以这个模态为例:

<div class="modal-header">
    <button type="button" class="close close_link" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Modal header</h3>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
    <a href="#" class="btn close_link" data-dismiss="modal">Close</a>   
</div>

顶部的 X 按钮和底部的关闭按钮都可以隐藏/关闭模式,因为data-dismiss="modal". 所以我想知道,如果我能以某种方式倾听吗?

或者我可以像这样手动完成,我猜......

$("#salesitems_modal").load(url, data, function() { 
     $(this).modal('show'); 
     $(this).find(".close_link").click(modal_closing);
});

你怎么看?


阅读 79

收藏
2022-06-16

共1个答案

小编典典

针对 Bootstrap 3 和 4 进行了更新

Bootstrap 3Bootstrap
4
文档引用了两个可以使用的事件。

hide.bs.modal :当调用 hide 实例方法时立即触发此事件。
hidden.bs.modal :当模式对用户完成隐藏时触发此事件(将等待 CSS 转换完成)​​。

并提供一个如何使用它们的例子:

$('#myModal').on('hidden.bs.modal', function () {
  // do something鈥�
})

旧版 Bootstrap 2.3.2 答案

Bootstrap 的文档引用了您可以使用的两个事件。

hide :调用 hide 实例方法时立即触发此事件。
hidden :当模式对用户完成隐藏时触发此事件(将等待 css 转换完成)​​。

并提供了如何使用它们的示例:

$('#myModal').on('hidden', function () {
    // do something...
})
2022-06-16