什么结束了模态

What closed the modal?

本文关键字：模态 结束了 什么      更新时间：2023-09-26

我正在使用twitter引导模式。它包含按钮"保存"，"取消"和箭头关闭。当模态由箭头和按钮关闭时，如何处理这种情况(并识别它)?

  $("#myModal).on('hidden.bs.modal', function () {
    // ??? Arrow or button is the initiator
  });

你需要自己钩住按钮/图标点击，并从javascript中取消模态。下面是一个例子:

$(function () {
    var myModal = $("#myModal");
    $("#btnShow").on("click", function () {
        myModal.modal("show");
    });
    myModal.find(".closeIcon").on("click", function () {
        console.log("Close Icon clicked.");
        myModal.trigger("myModal.dismiss.closeIcon");
        myModal.modal("hide");
    }).end().find(".closeButton").on("click", function () {
        console.log("Close Button clicked.");
        myModal.trigger("myModal.dismiss.closeButton");
        myModal.modal("hide");        
    }).end().find(".saveButton").on("click", function () {
        console.log("Save Button clicked.");
        myModal.trigger("myModal.dismiss.saveButton");
        myModal.modal("hide");        
    });
    myModal.on("myModal.dismiss.closeIcon", function () {
        console.log("Close Icon Handler called.");
    }).on("myModal.dismiss.closeButton", function () {
        console.log("Close Button Handler called.");
    }).on("myModal.dismiss.saveButton", function () {
        console.log("Save Button Handler called.");
    });
});

基本模态HTML(添加了closeIcon、closeButton和saveButton类，以便能够调度事件)

<button id="btnShow">Show Modal</button>
<div id="myModal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close closeIcon" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default closeButton" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary saveButton">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

jsfiddle。

关闭data-toggles(如data-dismiss="modal")的模态时无法跟踪事件

尝试使用它们每个上的事件来解决

相关文章：