Question

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

e.g。我们以此模态为例：

<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按钮和底部的关闭按钮都可以隐藏/关闭模态。所以我想知道，如果我能以某种方式倾听那个？

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

$("#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's documentation指的是您可以使用的两个事件。

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

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

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

Answer 2

如果你的模态div是动态添加的，那么使用（For bootstrap 3）

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

这也适用于非动态内容。

Answer 3

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

$( '#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模式事件：

hide.bs.modal =>在要隐藏模式时发生。
hidden.bs.modal =>在完全隐藏模式（在CSS转换完成之后）时发生。

Array
.from(document.querySelectorAll('table#datatable td')) // Or some other selector you wish
.filter(r=>r.hidden) // Enter here your filter func. Can also filter by `r.style.display` etc.
.reduce((sum, curr)=>sum+(Number(curr.innerHTML) || 0), 0) // Here we try to get the value of the td. If it will resolve to NaN ==> We will return 0 and won't affect the value.

我希望这会有所帮助。

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

但是，如果要在模式关闭时执行某些操作，则可以使用已经编写的提示

如何处理Twitter Bootstrap中的模态结束事件？

5 个答案:

针对Bootstrap 3和4

Legacy Bootstrap 2.3.2回答