Capture close event on Bootstrap Modal

Question

I have a Bootstrap Modal to select events  If the user clicks on the X button or outside the modal  I would like to send them to the default event  How can I capture these events   This is my HTML code    lt div class  modal  id  myModal  gt       lt div class  modal-dialog  gt           lt div class  modal-content event-selector  gt               lt div class  modal-header  gt                   lt button type  button  class  close  data-dismiss  modal  aria-hidden  true  gt x lt  button gt                   lt center gt  lt h1 class  modal-title event-selector-text  gt Select an Event lt  h1 gt  lt center gt               lt  div gt               lt div class  container  gt  lt  div gt               lt div class  modal-body  gt                   lt div class  event-banner  gt                       lt a href    event 1  gt                           lt img src   lt  php echo IMAGES EVENT1 LOGO    gt   width  100   gt                       lt  a gt                   lt  div gt                   lt div class  event-banner  gt                       lt a href    event 2  gt                           lt img src   lt  php echo IMAGES EVENT2 LOGO    gt   width  100   gt                       lt  a gt                   lt  div gt               lt  div gt           lt  div gt       lt  div gt   lt  div gt

User · Answer

Though is answered in another stack overflow question Bind a function to Twitter Bootstrap Modal Close but for visual feel here is more detailed answer.

Source: http://getbootstrap.com/javascript/#modals-events

User · Answer

This is very similar to another stackoverflow article  Bind a function to Twitter Bootstrap Modal Close   Assuming you are using some version of Bootstap v3 or v4  you can do something like the following       myModal   on  hidden bs modal   function             put your default event here

User · Answer

I was having this same problem in a web app using Microsoft Visual Studio 2019  Asp Net 3 1 and Bootstrap 4 5   I had a modal form open to add a new staff person  only a few input fields  and the Add Staff button would invoke an ajax call to create the staff records in the database   Upon successful return the code would refresh the partial razor page of staff  so the new staff person would appear in the list   Just before the refresh I would close the Add Staff modal and display a Please Wait modal which only had a bootstrap spinner button on it   What happened is that the Please Wait modal would stay displayed and not close after the staff refresh and the modal  hide   function on this modal was called  Some times the modal would disappear but the modal backdrop would remain effectively locking the Staff List form  Since Bootstrap has issues with multiple modals open at once  I thought maybe the Add Staff modal was still open when the Please Wait modal was displayed and this was causing problems   I made a function to display the Please Wait modal and do the refresh  and called it using the Javascript function setTimeout   to wait 1 2 second after closing hiding the Add Staff modal    hide the modal form    quot  addNewStaffModal quot   modal  hide    setTimeout RefreshStaffListAfterAddingStaff  500     wait for 1 2 second  Here is the code for the refresh function  function RefreshStaffListAfterAddingStaff            refresh the staff list in our partial view        show the please wait message         PleaseWaitModal   modal  show           refresh the partial view         StaffAccountsPartialView   load  StaffAccounts handler StaffAccountsPartial           function  data  status  jqXGR                   hide the wait modal                 PleaseWaitModal   modal  hide                   enable all the fields on our form                quot  StaffAccountsForm  input quot   prop  quot disabled quot   false                  scroll to the top of the staff list window             window scroll                   top  0                  left  0                  behavior   smooth                                  This seems to have totally solved my problem

User · Answer

Alternative way to check would be  if       myModal   is   visible             if modal is not shown visible then do something

User · Answer

This is worked for me  anyone can try it      myModal   on  hidden bs modal   function          for  instance in CKEDITOR instances          CKEDITOR instances instance  destroy            myModal  modal-body   html                you can open ckEditor in Modal window

User · Answer

I tried using it and didn t work  guess it s just the modal versioin   Although  it worked as this       myModal   on  hide bs modal   function             put your default event here       Just to update the answer

[twitter-bootstrap] Capture close event on Bootstrap Modal

Examples related to twitter-bootstrap

Examples related to events

[twitter-bootstrap] Capture close event on Bootstrap Modal

Examples related to twitter-bootstrap

Examples related to events

Examples related to bootstrap-modal