216

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

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

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

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

你怎么看？

4

5 回答 5

427

针对 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 的文档引用了您可以使用的两个事件。

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

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

$('#myModal').on('hidden', function () {
    // do something…
})
于 2012-09-07T14:04:27.433 回答
83

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

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

这也适用于非动态内容。

于 2014-11-06T12:55:16.100 回答
20

模态事件有两对，一对是“显示”和“显示”，另一对是“隐藏”和“隐藏”。从名字可以看出，当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' )
   });

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

于 2013-04-26T09:08:16.890 回答
3

引导模式事件：

  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>

我希望这将有所帮助。

于 2019-07-04T09:06:23.903 回答
1

如果您想在单击关闭按钮时像您描述的那样专门做某事：

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

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

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

但是如果你想在模态关闭时做一些事情，你可以使用已经写好的提示

于 2020-07-23T22:39:54.707 回答