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

191

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

例如，以该模式为例：

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

你怎么看？

jquery twitter-bootstrap modal-dialog

— 侯曼
source

2

将功能绑定到Twitter Bootstrap Modal Close的

— Salvador Dali

369

已针对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…
})

— 阿尔伯特德维戈
source

1

由于某些原因，当我将鼠标从模态中的按钮上移出时，这也会触发我。当我以模式提交表单时（甚至在onSubmit事件触发之前）。有人知道如何停止这种行为吗？

— 盖伊2013年

2

为了提供一些额外的上下文，我建议使用$（document）.on（'hidden'，'#myModal'，function（）{//做某事}）; 以防止它在某些情况下不起作用，例如当它包含在$（document）.ready函数声明中时。

— Gareth Daine 2015年

您好，我想应用模式隐藏式jquery。我在项目中应用了相同的代码，但无法正常工作。您有同样的建议吗？

— Hardi Shah

@HardiShah，您应该问一个新问题，包括您的代码和/或错误。

— albertedevigo

67

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

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

这也适用于非动态内容。

— 困惑
source

隐藏与隐藏之间的区别

— Mahi

3

调用hide实例方法后，将立即触发@mahi .hide事件。相反，当从用户中隐藏完模式后，就会触发hidden事件（将等待CSS转换完成）。

— 困惑的

18

有两对模态事件，一个是“显示”和“显示”，另一个是“隐藏”和“隐藏”。从名称中可以看出，当模态即将结束时，将隐藏事件触发，例如，单击右上角的叉或关闭按钮等。模态实际上关闭之后，将触发“隐藏”。您可以自己测试这些事件。例如：

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

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

— 狮子座
source

1

Bootstrap模式事件：

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>

我希望这将有所帮助。

— Vishpatel73
source