Prevent Bootstrap Modal from disappearing when clicking outside or pressing escape

Question

I m using the Twitter Bootstrap modal as a wizard window  and would like to prevent the user from closing it when clicking outside of the modal or when pressing escape  Instead  I want it to be closed when the user presses the finish button  How could I achieve this scenario

User · Answer

Just add data-backdrop  static  and data-keyboard  false  attributes to that modal    Eg    lt a data-controls-modal  your div id  data-backdrop  static  data-keyboard  false  href     gt

User · Answer

If using JavaScript then       myModal   modal       backdrop   static       keyboard  false      or in HTML    lt a data-controls-modal  your div id  data-backdrop  static  data-keyboard  false  href     gt

User · Answer

lt button class  btn btn-danger fa fa-trash  data-toggle  modal  data-target   deleteModal  data-backdrop  static  data-keyboard  false  gt  lt  button gt    simply add data-backdrop and data-keyboard attribute to your button on which model is open

User · Answer

Works too  data-backdrop  static  to click out and data-keyboard  false  to Esc in your div modal     lt div id  idModal  class  modal hide  data-backdrop  static  data-keyboard  false  gt

User · Answer

jQuery   modal ajax   modal  show    backdrop   static   keyboard  false

User · Answer

lt button class  btn btn-primary btn-lg  data-backdrop  static  data-keyboard  false  data-target   myModal  data-toggle  modal  gt

User · Answer

If you need to setup this after the modal is shown  you can use  Nabid solution  However  sometimes you still need to allow some method to close the modal  Assuming you have a button with class really-close-the-modal  which should really close the modal  you can use this code  jquery    var closeButtonClicked   false       really-close-the-modal   on  click   function          closeButtonClicked   true           myModal   on  hide bs modal   function  e        if   closeButtonClicked            e preventDefault            e stopPropagation            return false            closeButtonClicked   false        This isn t really nice code design  but it helped me in a situation where the modal was shown with a loader animation  until an ajax request returned  and only then could I know if the modal needed to be configured to prevent  implicit  closing  You can use a similar design to prevent closing the modal while it s still loading

User · Answer

You can use the code below    fn modal prototype constructor Constructor DEFAULTS backdrop    static     to change the default behavior

User · Answer

lt div class  modal show  gt     lt div class  modal-dialog  gt       lt div class  modal-content  gt         lt div class  modal-header  gt             lt h4 class  modal-title  gt Modal title lt  h4 gt        lt  div gt        lt div class  modal-body  gt         lt p gt One fine body amp hellip  lt  p gt     lt  div gt      lt  div gt  lt  --   modal-content -- gt   lt  div gt  lt  --   modal-dialog -- gt    i think this codepen  can help you prevent modal close css and bootstrap

User · Answer

If you need disable clicking outside but enable pressing escape      myModal   modal       backdrop   static        This disable for click outside event     keyboard  true           This for keyboard event

User · Answer

This code will prevent the modal from closing if you click outside the modal        document  ready function              myModal   modal              backdrop   static              keyboard  false

User · Answer

You should use backdrop static   keyboard false  and can use close button off by using jQuery or can remove from modal html  Hope this help        MyModal   modal   backdrop   static   keyboard  false             MyModal  close   css  display   none

User · Answer

The following script worked for me      prevent event when the modal is about to hide     myModal   on  hide bs modal   function  e        e preventDefault        e stopPropagation        return false

User · Answer

You can Use Direct in bootstrap model also     lt div class  modal fade  id  myModal  data-keyboard  false  data-backdrop  static  gt

User · Answer

Your code is working when i click out side the modal  but if i use html input field inside modal-body then focus your cursor on that input then press esc key the modal has closed  Click here

User · Answer

I use these attributes and it works  data-keyboard  false  data-backdrop  static

[html] Prevent Bootstrap Modal from disappearing when clicking outside or pressing escape?

Examples related to html

Examples related to twitter-bootstrap

[html] Prevent Bootstrap Modal from disappearing when clicking outside or pressing escape?

Examples related to html

Examples related to twitter-bootstrap

Examples related to modal-dialog