How to handle the modal closing event in Twitter Bootstrap?

jquery twitter-bootstrap modal-dialog

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?

possible duplicate of Bind a function to Twitter Bootstrap Modal Close

albertedevigo

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…
})

For some reason this is firing for me also when I mouseout of a button that I have in the modal. And when I submit a form in the modal (even before the onSubmit event fires). Anybody know how to stop this behavior?

To provide some extra context, I would recommend using $(document).on('hidden', '#myModal', function() { // do something }); to prevent this from not working in certain situations, such as when this is contained within a $(document).ready function declaration.

hello, i want to apply modal hidden jquery. and i applied same code in my project but it is not working. Do you have any suggestions for the same?

@HardiShah, you should ask a new question including your code and/or errors.

The code for Bootstrap 3+4 is working for Bootstrap 5 as well...

Confused

If your modal div is dynamically added then use( For bootstrap 3 and 4)

$(document).on('hide.bs.modal','#modal-id', function () {
                alert('');
 //Do stuff here
});

This will work for non-dynamic content also.

difference between hide vs hidden ??

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

Slawa Eremin

There are two pair of modal events, one is "show" and "shown", the other is "hide" and "hidden". As you can see from the name, hide event fires when modal is about the be close, such as clicking on the cross on the top-right corner or close button or so on. While hidden is fired after the modal is actually close. You can test these events your self. For exampel:

$( '#modal' )
   .on('hide', function() {
       console.log('hide');
   })
   .on('hidden', function(){
       console.log('hidden');
   })
   .on('show', function() {
       console.log('show');
   })
   .on('shown', function(){
      console.log('shown' )
   });

And, as for your question, I think you should listen to the 'hide' event of your modal.

I've used your solution and I've noticed that after 'show' being called I see the following messages: 'loaded', 'shown', and in the end the 'hide' message. It happens always when I try to open my second modal inside the first one. After these events, all my two modals closes. It was working properly before. I have no idea what I should do to solve it. Can you help me with an idea of how I should look on the web for the solution? Thank you!

vishpatel73

Bootstrap Modal Events:

hide.bs.modal => Occurs when the modal is about to be hidden. hidden.bs.modal => Occurs when the modal is fully hidden (after CSS transitions have completed).

<script type="text/javascript">
    $("#salesitems_modal").on('hide.bs.modal', function () {
        //actions you want to perform after modal is closed.
    });
</script>

I hope this will Help.

Emmanuel de Carvalho Garcia

If you want specifically do something when click on close button exactly like you described:

<a href="#" class="btn close_link" data-dismiss="modal">Close</a>

you need to attach an event using css selector:

$(document).on('click', '[data-dismiss="modal"]', function(){what you want to do})

But if you want to do something when modal close, you can use the already wrote tips

How to handle the modal closing event in Twitter Bootstrap?

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Links

Contact US