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

【问题标题】：How to handle the modal closing event in Twitter Bootstrap?如何处理 Twitter Bootstrap 中的模态关闭事件？
【发布时间】：2012-09-01 09:36:20
【问题描述】：

在 Twitter 引导程序中，查看 modals 文档。我不知道是否有办法监听模式的关闭事件并执行函数。

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

<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);
});

你怎么看？

【问题讨论】：

Bind a function to Twitter Bootstrap Modal Close的可能重复

标签： jquery twitter-bootstrap modal-dialog

【解决方案1】：

为 Bootstrap 3 和 4 更新

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

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

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

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

旧版 Bootstrap 2.3.2 答案

Bootstrap's documentation 指的是您可以使用的两个事件。

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

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

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

【讨论】：

由于某种原因，当我将鼠标移出模式中的按钮时，这也会触发我。当我在模式中提交表单时（甚至在 onSubmit 事件触发之前）。有人知道如何制止这种行为吗？
为了提供一些额外的上下文，我建议使用 $(document).on('hidden', '#myModal', function() { // do something });以防止它在某些情况下不起作用，例如当它包含在 $(document).ready 函数声明中时。
你好，我想应用模态隐藏 jquery。我在我的项目中应用了相同的代码，但它不起作用。你有什么相同的建议吗？
@HardiShah，您应该提出一个新问题，包括您的代码和/或错误。

【解决方案2】：

模态事件有两对，一对是“show”和“shown”，另一对是“hide”和“hidden”。从名字可以看出，当modal快要关闭时触发hide事件，比如点击右上角的十字或者关闭按钮等等。在模态实际关闭后触发隐藏。您可以自己测试这些事件。例如：

$( '#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' )
   });

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

【讨论】：

我使用了您的解决方案，我注意到在调用“显示”后，我看到以下消息：“加载”、“显示”，最后是“隐藏”消息。当我尝试在第一个模态中打开我的第二个模态时，总是会发生这种情况。在这些事件之后，我所有的两个模态都关闭了。它以前工作正常。我不知道我应该怎么做才能解决它。你能帮我想想我应该如何在网上寻找解决方案吗？谢谢！

【解决方案3】：

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

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

这也适用于非动态内容。

【讨论】：

隐藏与隐藏的区别？？
@mahi .hide 事件在 hide 实例方法被调用时立即触发。而当模式对用户隐藏完成时会触发 hidden 事件（将等待 CSS 转换完成）。

【解决方案4】：

引导模式事件：

hide.bs.modal => 当模态框即将被隐藏时发生。
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>

我希望这会有所帮助。

【讨论】：

【解决方案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})

但是如果你想在modal关闭的时候做点什么，你可以使用已经写好的tips

【讨论】：