Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 937
Houman Avatar asked Oct 18 '22 21:10

Houman


People also ask

How do you handle modal close?

The X button on top and the close button on bottom can both hide/close the modal because of data-dismiss="modal" .

How do I stop a bootstrap modal from closing?

When the Button is clicked, the HTML DIV is referenced using jQuery and its modal function is called along with properties data-backdrop: "static" and data-keyboard: false which disables the closing of the Bootstrap Modal Popup when clicked outside.

How do I manually close a bootstrap modal?

Answer: Use the modal('hide') Method You can simply use the modal('hide') method to hide or close the modal window in Bootstrap using jQuery. Other related Bootstrap's modal methods are modal('show') and modal('toggle') .

How do I add a close button to a modal?

The close button can be added by using the simple markup with CSS class. The main container for close button is the <button> tag with .


1 Answers

Updated for Bootstrap 3 and 4

Bootstrap 3 and Bootstrap 4 docs refer 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 provide 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…
})
like image 437
albertedevigo Avatar answered Oct 20 '22 10:10

albertedevigo