javascript - What closed the modal? -

javascript - What closed the modal? -

i using twitter bootsrap modal. contains buttons "save", "cancel" , arrow closing. how handle case (and recognize it) when modal closed arrow , when button?

$("#mymodal).on('hidden.bs.modal', function () { // ??? arrow or button initiator });

you need hook button/icon clicks , dismiss modal javascript. here example:

$(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."); }); });

basic modal html (with classes closeicon, closebutton, , savebutton added able dispatch events).

<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.

javascript jquery twitter-bootstrap