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

你怎么看?


为引导3和4更新

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

modal:当调用hide实例方法时立即触发此事件。 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…
})

有两对情态事件,一个是“show”和“shows”,另一个是“hide”和“hidden”。 从名称中可以看到,隐藏事件在模态接近关闭时触发,例如单击右上角的十字或关闭按钮等。而隐藏是在模态实际关闭后触发的。您可以自己测试这些事件。exampel:

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

至于你的问题,我认为你应该听听你的情态动词中的'hide'事件。


如果你的模式div是动态添加的,那么使用(用于引导3和4)

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

这也适用于非动态内容。


引导模式事件:

mode =>当模式即将被隐藏时发生。 当模式完全隐藏时发生(在CSS转换完成后)。

<script type="text/javascript">
    $("#salesitems_modal").on('hide.bs.modal', function () {
        //actions you want to perform after modal is closed.
    });
</script>

我希望这能有所帮助。


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

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

你需要使用CSS选择器附加一个事件:

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

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