在Bootstrap Modal上捕获关闭事件

Question

我有一个Boostrap Modal来选择事件.如果用户单击X按钮或模态外部,我想将它们发送到默认事件.我怎样才能捕获这些事件？

这是我的代码:

<div class="modal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content event-selector">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                <center><h1 class="modal-title event-selector-text">Select an Event</h1><center>
            </div>
            <div class="container"></div>
            <div class="modal-body">
                <div class="event-banner">
                    <a href="/?event=1">
                        <img src="<?php echo IMAGES_EVENT1_LOGO; ?>" width="100%">
                    </a>
                </div>
                <div class="event-banner">
                    <a href="/?event=2">
                        <img src="<?php echo IMAGES_EVENT2_LOGO; ?>" width="100%">
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

这非常类似于另一个stackoverflow文章,将一个函数绑定到Twitter Bootstrap Modal Close.假设您使用的是某些版本的Bootstap v3或v4,您可以执行以下操作:

$("#myModal").on("hidden.bs.modal", function () {
    // put your default event here
});

Answer 2

虽然在另一个堆栈溢出问题中回答将一个函数绑定到Twitter Bootstrap Modal Close但是对于视觉感觉这里是更详细的答案.

资料来源:http://getbootstrap.com/javascript/#modals-events

Answer 3

我尝试使用它并且不起作用,猜测它只是模态版本.

虽然,它的工作原理如下:

__CODE__

只是为了更新答案=)

Answer 4

在 Bootstrap 5 中捕获关闭事件，无需 jquery：

var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
  // do something...
})

Answer 5

这对我有用，任何人都可以尝试：

$("#myModal").on("hidden.bs.modal", function () {
    for (instance in CKEDITOR.instances)
        CKEDITOR.instances[instance].destroy();
    $('#myModal .modal-body').html('');    
});

您可以在模态窗口中打开 ckEditor