Houman Houman - 1 month ago 6
jQuery Question

How to handle the modal closing event in Twitter Bootstrap?

In Twitter bootstrap, looking at the modals documentation. I wasn't able to figure out if there is a way to listen to the close event of the modal and execute a function.

e.g. lets take this modal as an example:

<div class="modal-header">
<button type="button" class="close close_link" data-dismiss="modal" aria-hidden="true">&times;</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<a href="#" class="btn close_link" data-dismiss="modal">Close</a>
</div>


The X button on top and the close button on bottom can both hide/close the modal because of
data-dismiss="modal"
. So I wonder, if I could somehow listen to that?

Alternatively I could do it manually like this, I guess...

$("#salesitems_modal").load(url, data, function() {
$(this).modal('show');
$(this).find(".close_link").click(modal_closing);
});
}


What do you think?

Answer

Updated for Bootstrap 3

Bootstrap 3 documentation refers two events you can use

hide.bs.modal: This event is fired immediately when the hide instance method has been called.
hidden.bs.modal: This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).

And provides an example on how to use them:

$('#myModal').on('hidden.bs.modal', function () {
  // do something…
})

Legacy Bootstrap 2.3.2 answer

Bootstrap's documentation refers two events you can use

hide: This event is fired immediately when the hide instance method has been called.
hidden: This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).

And provides an example on how to use them:

$('#myModal').on('hidden', function () {
    // do something…
})
Comments