在 Bootstrap Modal 上捕获关闭事件

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

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

---

虽然在另一个堆栈溢出问题 Bind a function to Twitter Bootstrap Modal Close 中得到了回答，但为了视觉感受，这里有更详细的答案。

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

https://i.stack.imgur.com/TwxgH.png

---

我尝试使用它并没有用，猜它只是模态版本。

虽然，它是这样工作的：

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

只是为了更新答案=）

---

catch close event in bootstrap 5, without jquery：

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

---

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

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

您可以在 Modal 窗口中打开 ckEditor

---

要检查的替代 way 是：

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

---

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

就在刷新之前，我会关闭 Add Staff 模式并显示一个 Please Wait 模式，它上面只有一个引导微调器按钮。发生的情况是，在人员刷新和调用此模式上的 modal('hide') 函数后，请等待模式将保持显示而不关闭。有时模态会消失，但模态背景仍将有效地锁定员工列表表单。

由于 Bootstrap 存在同时打开多个模态的问题，我认为当显示 Please Wait 模态时 Add Staff 模态可能仍然打开，这会导致问题。我创建了一个函数来显示 Please Wait 模式并进行刷新，并使用 Javascript 函数 setTimeout() 调用它，在关闭/隐藏 Add Staff 模式后等待 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'
            });

        });
}

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

---

$("myModal button.close").click(function() {        
      // do something ...
});

---