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

How to handle the modal closing event in Twitter Bootstrap?

提问by Houman

In Twitter bootstrap, looking at the modalsdocumentation. 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.

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

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?

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

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?

你怎么认为？

回答by albertedevigo

Updated for Bootstrap 3 and 4

针对 Bootstrap 3 和 4 更新

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

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

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

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

And provide an example on how to use them:

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

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

Legacy Bootstrap 2.3.2 answer

Legacy Bootstrap 2.3.2 答案

Bootstrap's documentationrefers two events you can use.

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

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

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

And provides an example on how to use them:

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

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

回答by Confused

If your modal div is dynamically added then use( For bootstrap 3)

如果您的模态 div 是动态添加的，则使用（对于引导程序 3）

$(document).on('hide.bs.modal','#modal-id', function () {
                alert('');
 //Do stuff here
});

This will work for non-dynamic content also.

这也适用于非动态内容。

回答by leo

There are two pair of modal events, one is "show" and "shown", the other is "hide" and "hidden". As you can see from the name, hide event fires when modal is about the be close, such as clicking on the cross on the top-right corner or close button or so on. While hidden is fired after the modal is actually close. You can test these events your self. For exampel:

模态事件有两对，一个是“show”和“shown”，另一个是“hide”和“hidden”。顾名思义，当模态即将关闭时会触发hide事件，例如点击右上角的叉号或关闭按钮等。在模态实际关闭后触发 hidden 。您可以自己测试这些事件。例如：

$( '#modal' )
   .on('hide', function() {
       console.log('hide');
   })
   .on('hidden', function(){
       console.log('hidden');
   })
   .on('show', function() {
       console.log('show');
   })
   .on('shown', function(){
      console.log('shown' )
   });

And, as for your question, I think you should listen to the 'hide' event of your modal.

而且，至于你的问题，我认为你应该听听你的模态的“隐藏”事件。

回答by vishpatel73

Bootstrap Modal Events:

Bootstrap 模态事件：

1. hide.bs.modal=> Occurs when the modal is about to be hidden.
2. hidden.bs.modal=> Occurs when the modal is fully hidden (after CSS transitions have completed).

1. hide.bs.modal=> 当模态即将被隐藏时发生。
2. hidden.bs.modal=> 当模态完全隐藏时发生（在 CSS 转换完成后）。

<script type="text/javascript">
    $("#salesitems_modal").on('hide.bs.modal', function () {
        //actions you want to perform after modal is closed.
    });
</script>

I hope this will Help.

我希望这将有所帮助。