Question

我正在使用twitter bootsrap模式。它包含“保存”，“取消”按钮和关闭箭头。如何通过箭头和按钮关闭模态时处理案例（并识别它）？

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

Answer 1

你需要勾选按钮/图标点击自己并从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 here

Answer 2

使用data-toggles data-dismiss="modal"关闭模式时无法跟踪事件。

尝试使用每个事件来解决问题。

什么关闭模式？

2 个答案: