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

Question

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

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

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

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

你怎么认为？

Answer 1

针对 Bootstrap 3 和 4 更新

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

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

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

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

Legacy Bootstrap 2.3.2 答案

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

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

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

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

Answer 2

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

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

这也适用于非动态内容。

Answer 3

模态事件有两对，一个是“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' )
   });

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

Answer 4

Bootstrap 模态事件：

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>

我希望这将有所帮助。

Answer 5

如果你想在点击关闭按钮时专门做一些事情，就像你描述的那样：

<a href="#" class="btn close_link" data-dismiss="modal">Close</a>

您需要使用 css 选择器附加一个事件：

$(document).on('click', '[data-dismiss="modal"]', function(){what you want to do})

但是如果你想在模态关闭时做点什么，你可以使用已经写好的提示