在 Bootstrap 模态上捕获关闭事件

Question

我有一个 Bootstrap 模式到 select 事件。如果用户单击 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>

Answer 1

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

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

Answer 2

我试过没用，估计是模型版本问题吧

虽然，它是这样工作的：

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

只是为了更新答案=)

Answer 3

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

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

Answer 4

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

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

你可以在Modal中打开ckEditor window

Answer 5

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

就在刷新之前，我将关闭“添加员工”模式并显示“请稍候”模式，其中只有一个 bootstrap 微调按钮。发生的事情是，在员工刷新并调用此模态上的模态（'hide'）函数后，请稍候模态将保持显示状态并且不会关闭。有时模态会消失，但模态背景仍会有效地锁定员工列表表单。

由于 Bootstrap 存在同时打开多个模态的问题，我认为可能在显示“请稍候”模态时“添加员工”模态仍处于打开状态，这导致了问题。我创建了一个函数来显示“请稍候”模式并进行刷新，并使用 Javascript 函数 setTimeout() 调用它以在 closing/hiding 添加员工模式后等待 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'
            });

        });
}

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

Answer 6

要检查的备选 way 是：

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

Answer 7

catch close event in bootstrap 5, without jquery:

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

Answer 8

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

在 Bootstrap 模态上捕获关闭事件

Capture close event on Bootstrap Modal

events

twitter-bootstrap

bootstrap-modal