Twitter bootstrap 在引导模式上捕获关闭事件

我有一个引导模式来选择事件。 如果用户单击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>

x
选择一个事件

---

这与另一篇stackoverflow文章非常相似，。假设您使用的是某个版本的Bootstap v3或v4，您可以执行以下操作：

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

---

我试过用它，但没用，我猜这只是模态版本

尽管如此，它的工作原理如下：

$("#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应用程序中遇到同样的问题。我打开了一个模式表单来添加一个新的人员（只有几个输入字段），addstaff按钮将调用ajax调用在数据库中创建人员记录。成功返回后，代码将刷新员工的部分页面（因此新员工将出现在列表中）

在刷新之前，我会关闭AddStaff模式，并显示一个PleaseWait模式，该模式上只有一个引导微调器按钮。发生的情况是，在人员刷新和调用此模式上的模式（'hide'）函数后，Please Wait模式将保持显示，而不是关闭。有时，模式会消失，但模式背景仍会有效地锁定员工名单表单

由于Bootstrap存在同时打开多个模态的问题，我认为当显示Please Wait模态时，AddStaff模态可能仍然打开，这导致了问题。我创建了一个函数来显示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
}

---

$（window）.onclick（）在JavaScription中可能与抱歉重复，因为我第一次尝试此操作，并且它连续工作了5或6次，所以我重新编译了我的应用程序，并且再次遇到相同的问题，请等待模式在模式（'hide'）后保持显示。这很有效，但是我如何区分正常关闭和强制关闭？我有两个按钮（确定，取消）。使用“取消”时，我会从模板中关闭它，但使用“确定”时，我需要先关闭它并完成我的工作。我需要的是回调，而不是事件