如何在Twitter引导程序中处理模式关闭事件

Question

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

由于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：当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…
})

Answer 2

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

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

这也适用于非动态内容。

Answer 3

有两对模态事件，一对是"show"one_answers"show"，另一对是"hide"one_answers"hidden"。从名称中可以看出，隐藏事件在模态即将关闭时触发，例如单击右上角的十字或关闭按钮等。而隐藏事件则在模态实际关闭后触发。你可以自己测试这些事件。例如：

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

引导模式事件：

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>

我希望这会有所帮助。

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

但是，如果你想在模态关闭时做点什么，你可以使用已经写好的技巧