我正在使用twitter bootsrap模式。它包含“保存”,“取消”按钮和关闭箭头。如何通过箭头和按钮关闭模态时处理案例(并识别它)?
$("#myModal).on('hidden.bs.modal', function () {
// ??? Arrow or button is the initiator
});
答案 0 :(得分: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">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</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 -->
答案 1 :(得分:0)
使用data-toggles
data-dismiss="modal"
关闭模式时无法跟踪事件。
尝试使用每个事件来解决问题。