首页 文章

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

提问于
浏览
152

在Twitter bootstrap中,查看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);
});

你怎么看?

3 回答

  • 287

    已更新为Bootstrap 3和4

    Bootstrap 3Bootstrap 4 docs引用您可以使用的两个事件 .

    hide.bs.modal:调用hide实例方法时会立即触发此事件 . hidden.bs.modal:当模态完成对用户的隐藏时将触发此事件(将等待CSS转换完成) .

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

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

    Legacy Bootstrap 2.3.2答案

    Bootstrap's documentation指的是您可以使用的两个事件 .

    hide:调用hide实例方法时立即触发此事件 . 隐藏:当模态完成对用户隐藏时将触发此事件(将等待css转换完成) .

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

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

    如果动态添加模态div,则使用(For bootstrap 3)

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

    这也适用于非动态内容 .

  • 17

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

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

    而且,至于你的问题,我认为你应该听你的模态的'隐藏'事件 .

相关问题