如何检测 Bootstrap 模态关闭的方式

Question

我将处理程序附加到 Bootstrap hidden.bs.modal 事件以检测模式何时关闭，但它可以通过多种方式关闭：

1. 通过$('#modal').modal('hide') 或$('#modal').modal('toggle') 显式关闭它；
2. 点击模态框的背景部分（如果允许）；
3. 通过数据属性，例如data-dismiss="modal"

有没有办法检测使用了哪些选项？在 hidden.bs.modal 处理程序内部，e.target 始终显示为 div#modal

Answer 1

问题是hidden.bs.modal 是一个在模式关闭后触发的事件。所以这不是用户从关闭按钮、角 X 或覆盖层触发的click 事件...

也就是说，您可以使用click 事件将用户单击的位置存储在变量中并 毫秒后，当hidden.bs.modal 触发时，使用该变量。

演示：

$(document).ready(function(){

  // Variable to be set on click on the modal... Then used when the modal hidden event fires
  var modalClosingMethod = "Programmatically";

  // On modal click, determine where the click occurs and set the variable accordingly
  $('#exampleModal').on('click', function (e) {

    if ($(e.target).parent().attr("data-dismiss")){
      modalClosingMethod = "by Corner X";
    }
    else if ($(e.target).hasClass("btn-secondary")){
      modalClosingMethod = "by Close Button";
    }
    else{
      modalClosingMethod = "by Background Overlay";
    }

    // Restore the variable "default" value
    setTimeout(function(){
      modalClosingMethod = "Programmatically";
    },500);
  });

  // Modal hidden event fired
  $('#exampleModal').on('hidden.bs.modal', function () {
    console.log("Modal closed "+modalClosingMethod);
  });

  // Closing programmatically example
  $('#exampleModal').modal("show");
  setTimeout(function(){
    $('#exampleModal').modal("hide");
  },1000);
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

CodePen

Answer 2

您可以使用hide.bs.modal 事件来捕获document.activeElement。如果您有多个按钮，所有这些按钮都包括data-bs-dismiss='modal'，这将允许您确定按下了哪些按钮。这避免了对onclick= 方法或其他事件处理程序的需要。

如果hide.bs.modal 事件的Event 对象有一个包含触发元素的.relatedTarget 或类似的对象，似乎会更优雅，但可惜现在情况并非如此。

下面的例子假设 jQuery 带有 $:

$(() => {
    var $dlg = $("#myBootstrapModalDialog");
    var $closeElement;

    $dlg.on('show.bs.modal', (e) => {
        // maybe do something to initialize the modal here...
    })
    .on('hide.bs.modal', (e) => {
        $closeElement = $(document.activeElement);
    })
    .on('hidden.bs.modal', (e) => {
        var id = $closeElement.attr('id');
        // do something depending on the id...
        if (id === 'btn-save') {
            // save something
        }
        $closeElement = null;
    });
});

示例 HTML：

<div class="modal fade"
     id="myBootstrapModalDialog"
     tabindex="-1"
     aria-labelledby="myDialogTitle"
     aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content rounded-0 mx-auto">
            <div class="modal-header">
                <h3 class="modal-title text-primary" id="myDialogTitle">
                    Save this stuff?
                </h3>
                <button id="btn-close" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body px-3">
                Are you sure you want to save this stuff?
            </div>
            <div class="modal-footer">
                <button id="btn-cancel" type="button" class="btn btn-link" data-bs-dismiss="modal">
                    Cancel
                </button>
                <button id="btn-save" type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    Save
                </button>
            </div>
        </div>
    </div>
</div>