如何处理 Twitter Bootstrap 中的模态关闭事件? [英] How to handle the modal closing event in Twitter Bootstrap?

问题描述

在 Twitter 引导程序中，查看 modals 文档.我无法弄清楚是否有办法侦听模态的关闭事件并执行函数.

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

<button type="button" class="close close_link" data-dismiss="modal" aria-hidden="true">&times;</button><h3>模态头</h3>
<div class="modal-body">...

<div class="modal-footer"><a href="#" class="btn close_link" data-dismiss="modal">关闭</a>

顶部的 X 按钮和底部的关闭按钮都可以隐藏/关闭模态，因为 data-dismiss="modal".所以我想知道，我是否能以某种方式听听那个?

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

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

你怎么看?

解决方案

针对 Bootstrap 3 和 4 进行了更新

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

<块引用>

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

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

$('#myModal').on('hidden.bs.modal', function () {//做点什么…})

传统 Bootstrap 2.3.2 答案

Bootstrap 的文档 提到了您可以使用的两个事件.

<块引用>

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

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

$('#myModal').on('hidden', function () {//做点什么…})

In Twitter bootstrap, looking at the modals documentation. I wasn't able to figure out if there is a way to listen to the close event of the modal and execute a function.

e.g. lets take this modal as an example:

<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>

The X button on top and the close button on bottom can both hide/close the modal because of data-dismiss="modal". So I wonder, if I could somehow listen to that?

Alternatively I could do it manually like this, I guess...

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

What do you think?

解决方案

Updated for Bootstrap 3 and 4

Bootstrap 3 and Bootstrap 4 docs refer two events you can use.

hide.bs.modal: This event is fired immediately when the hide instance method has been called.
hidden.bs.modal: This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).

And provide an example on how to use them:

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

Legacy Bootstrap 2.3.2 answer

Bootstrap's documentation refers two events you can use.

hide: This event is fired immediately when the hide instance method has been called.
hidden: This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).

And provides an example on how to use them:

$('#myModal').on('hidden', function () {
    // do something…
})

这篇关于如何处理 Twitter Bootstrap 中的模态关闭事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！