在Bootstrap Modal上捕获关闭事件

我有一个Bootstrap Modal来选择事件。如果用户单击X按钮或模式外部，则希望将其发送到默认事件。如何捕获这些事件？

这是我的HTML代码：

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

这与另一篇stackoverflow文章（将功能绑定到Twitter Bootstrap Modal Close）非常相似。假设您使用的是Bootstap v3或v4的某个版本，则可以执行以下操作：

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

尽管在另一个堆栈溢出问题中得到了解答，但将功能绑定到Twitter Bootstrap Modal Close，但出于视觉感受，这里是更详细的答案。

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

我尝试使用它，但是没有用，可能只是模态通用。

虽然，它是这样工作的：

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

只是为了更新答案=）

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

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

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

我在使用Microsoft Visual Studio 2019，Asp.Net 3.1和Bootstrap 4.5的Web应用程序中遇到同样的问题。我打开了一个模态表单，以添加一个新职员（仅几个输入字段），并且“添加职员”按钮将调用ajax调用以在数据库中创建职员记录。成功返回代码后，代码将刷新员工的部分剃刀页面（因此，新员工将出现在列表中）。

在刷新之前，我将关闭“添加人员”模式并显示“请稍候”模式，该模式上只有一个Bootstrap Spinner按钮。发生的情况是，在职员刷新后，“请稍候”模式将保持显示状态并且不会关闭，并且调用了该模式上的modal（'hide'）函数。有时模态会消失，但模态背景将仍然有效地锁定“员工名单”表格。

由于Bootstrap一次打开多个模式存在问题，我认为当显示Please Wait模式时，Add Staff模式可能仍然处于打开状态，这引起了问题。我制作了一个函数，显示“请稍候”模式并进行刷新，并使用Javascript函数setTimeout（）在关闭/隐藏“添加员工”模式后等待1/2秒来调用它：

//hide the modal form
$("#addNewStaffModal").modal('hide');
setTimeout(RefreshStaffListAfterAddingStaff, 500); //wait for 1/2 second

这是刷新功能的代码：

function RefreshStaffListAfterAddingStaff() {
    // refresh the staff list in our partial view

    //show the please wait message
    $('#PleaseWaitModal').modal('show');

    //refresh the partial view
    $('#StaffAccountsPartialView').load('StaffAccounts?handler=StaffAccountsPartial',
        function (data, status, jqXGR) {

            //hide the wait modal
            $('#PleaseWaitModal').modal('hide');
            // enable all the fields on our form
            $("#StaffAccountsForm :input").prop("disabled", false);

            //scroll to the top of the staff list window
            window.scroll({
                top: 0,
                left: 0,
                behavior: 'smooth'
            });

        });
}

这似乎已经完全解决了我的问题！

另一种检查方法是：

if (!$('#myModal').is(':visible')) {
    // if modal is not shown/visible then do something
}