How to handle the modal closing event in Twitter Bootstrap

Question

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    lt div class  modal-header  gt       lt button type  button  class  close close link  data-dismiss  modal  aria-hidden  true  gt  amp times  lt  button gt       lt h3 gt Modal header lt  h3 gt   lt  div gt   lt div class  modal-body  gt       lt  div gt   lt div class  modal-footer  gt       lt a href     class  btn close link  data-dismiss  modal  gt Close lt  a gt      lt  div gt    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

User · Accepted Answer

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

User · Answer

If you want specifically do something when click on close button exactly like you described   lt a href  quot   quot  class  quot btn close link quot  data-dismiss  quot modal quot  gt Close lt  a gt   you need to attach an event using css selector    document  on  click     data-dismiss  quot modal quot     function   what you want to do    But if you want to do something when modal close  you can use the already wrote tips

User · Answer

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

User · Answer

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      lt script type  text javascript  gt          salesitems modal   on  hide bs modal   function                actions you want to perform after modal is closed           lt  script gt    I hope this will Help

User · Answer

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

[jquery] How to handle the modal closing event in Twitter Bootstrap?

Updated for Bootstrap 3 and 4

Legacy Bootstrap 2.3.2 answer

Examples related to jquery

Examples related to twitter-bootstrap

[jquery] How to handle the modal closing event in Twitter Bootstrap?

Updated for Bootstrap 3 and 4

Legacy Bootstrap 2.3.2 answer

Examples related to jquery

Examples related to twitter-bootstrap

Examples related to modal-dialog