捕获Bootstrap模态框的关闭事件

Question

我有一个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>

- user411103

---

$(window).onclick() 在 JavaScript 中。 - sheshadri

可能是将函数绑定到Twitter Bootstrap模态框关闭的重复问题。 - kmonsoor

Answer 1

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

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

- cfnerd

---

可以做到，但是我需要确认一下翻译的内容是否正确：这段话的意思是询问如何区分程序正常关闭和强制关闭，有两个按钮（“确定”和“取消”），当选择“取消”时，程序会被关闭，而当选择“确定”时，需要先关闭程序并执行相关操作，在这种情况下需要回调函数而不是事件。 - Dani

Answer 2

虽然另一个stack overflow问题Bind a function to Twitter Bootstrap Modal Close已经回答了这个问题，但为了更好的视觉效果，这里提供更详细的答案。

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

- vibs2006

Answer 3

我尝试使用它，但没有起作用，猜测这只是模态版本。

虽然，它可以像这样工作：

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

只是更新答案 =)

- Eduardo Sganzerla

Answer 4

如何在Bootstrap 5中捕获关闭事件而无需使用jQuery:

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

- RockBoro

---

它运行良好。 - Iman Bahrampour

Answer 5

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

这个方法适用于我，任何人都可以尝试：

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

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

- Monzur

Answer 6

另一种检查的方法是：

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

- estinamir

Answer 7

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

- Mustapha Belquas

Answer 8

我在使用Microsoft Visual Studio 2019、Asp.Net 3.1和Bootstrap 4.5的Web应用程序中遇到了同样的问题。我打开了一个模态窗口以添加新的工作人员（只有几个输入字段），点击“添加工作人员”按钮将调用AJAX来创建数据库中的工作人员记录。成功返回后，代码将刷新部分Razor页面上的工作人员列表（这样新的工作人员就会出现在列表中）。

在刷新之前，我会关闭“添加工作人员”模态窗口并显示一个“请稍候”模态窗口，其上仅有一个Bootstrap的旋转器按钮。结果是在工作人员列表刷新后，“请稍候”模态窗口将保持显示状态，并且此模态窗口上的modal('hide')函数被调用后仍无法关闭。有时模态窗口会消失，但背景却仍保留，有效地锁定了工作人员列表表单。

由于Bootstrap存在同时打开多个模态窗口的问题，我认为“添加工作人员”模态窗口可能仍然处于打开状态，而“请稍候”模态窗口的显示导致了问题。因此，我编写了一个函数来显示“请稍候”模态窗口并进行刷新，并使用JavaScript函数setTimeout()在关闭/隐藏“添加工作人员”模态窗口后等待0.5秒后调用该函数。

//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'
            });

        });
}

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

- Bruce Tompkins

---

抱歉，由于我第一次尝试并连续成功5或6次后，我重新编译了我的应用程序，但仍然遇到了相同的问题，即"请稍候"模态框在modal('hide')之后仍然保持显示状态。 - Bruce Tompkins