Question

我有一个Boostrap模式来选择事件。如果用户单击X按钮或模态外部，我想将它们发送到默认事件。我该如何捕捉这些事件？

这是我的代码：

<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

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

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

Answer 2

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

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

Answer 3

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

虽然，它的工作原理如下：

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

只是为了更新答案=）

Answer 4

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

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

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

Answer 5

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

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

由于Bootstrap一次打开多个模式有问题，所以我认为显示“请稍候”模式时“添加人员”模式仍处于打开状态，这引起了问题。我制作了一个函数来显示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'
            });

        });
}

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

Answer 6

要检查的替代way为：

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

在Bootstrap Modal上捕获关闭事件

6 个答案: