如何在Twitter引导程序中处理模式关闭事件?

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.

在Twitter bootstrap中，查看modals文档。我不知道是否有一种方法可以侦听模式的关闭事件并执行一个函数。

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按钮和底部的close按钮都可以隐藏/关闭模式，因为数据-解散="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?

你怎么认为?

3 个解决方案

#1

Updated for Bootstrap 3

Bootstrap 3 documentation refers two events you can use

Bootstrap 3文档涉及两个您可以使用的事件

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。模式:在调用隐藏实例方法时立即触发此事件。hidden.bs。模态:当模态完成对用户隐藏(等待CSS转换完成)时触发此事件。

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

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

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

And provides an example on how to use them:

并举例说明如何使用它们:

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

#2

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

如果动态添加了modal div，则使用(对于bootstrap 3)

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

This will work for non-dynamic content also.

这也适用于非动态内容。

#3

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”和“show”，另一个是“hide”和“hidden”。正如您从名称中看到的，当modal接近关闭时，隐藏事件触发，例如单击右上角的十字或者关闭按钮等等。当隐藏被点燃后，模态实际上是关闭。你可以自己测试这些事件。exampel:

$( '#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.

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