CODEWITHSUNDEEP
twitter-bootstrap
Zak
Zak

Reputation: 2698

Bootstrap 3 modal doesn't close after first opening

I'm thinking this is a bug with Bootstrap itself, because I'm encountering this problem even on the demonstration page. If you open the modal window, the built-in close button works the first time, but if you close the modal and re-open it, the close (and X) buttons don't close the modal, so you have to click outside of the box to close it. You can see this on the Bootstrap demonstration page:

http://getbootstrap.com/javascript/#modals

(Scroll down to "live demo" and click "Launch demo modal". Close the modal window once, re-open it, and the "close" button will no longer work until the page is refreshed.)

Has anyone found a solution to this so that the close button works each time the modal is opened?

Upvotes: 3

Views: 5337

Answers (4)

Jonathan
Jonathan

Reputation: 31

This was still an issue for me with Bootstrap 3. Was happening because I was populating the target modal dynamically. Thought this could be helpful to anyone trying to do something similar!

I had to:

  • Add a class to the close button
  • Use that class for use as a trigger to:

  • Hide the modal; empty the dynamic content; and remove the .modal-backdrop

    $(document).on('click', '#modal .closeModal', function(){
   $('#modal').modal('hide'); // hide the modal 
   $('#modal-dynamic-content').empty(); // empties dynamic content
   $('.modal-backdrop').remove(); // removes all modal-backdrops
});

NOTE: This empties your modal, so only use the empty if you're triggering a load into said modal

Upvotes: 1

Søren Beck Jensen
Søren Beck Jensen

Reputation: 1676

If you like me would prefer to not modify the bootstrap file you can do the following instead.

jQuery('[data-dismiss="modal"]').on('click', function(){
     jQuery('.modal').hide();
     jQuery('.modal-backdrop').hide();
});

Add that right after your .modal('show'); call

Upvotes: 1

Jessica Legner
Jessica Legner

Reputation: 36

Removing .off('click.dismiss.modal') in bootstrap.min.js did the trick for me. If you were using the CDN, you will need to download it and change the reference accordingly.

Upvotes: 0

kwerle
kwerle

Reputation: 2391

This bug in bootstrap seems to be a hot topic: https://github.com/twbs/bootstrap/issues/9362

I'll be updating my bootstrap and see if that does it...

Upvotes: 3

Related Questions