Disallow Twitter Bootstrap modal window from closing

Question

I am creating a modal window using Twitter Bootstrap  The default behavior is if you click outside the modal area  the modal will automatically close  I would like to disable that -- i e  not close the modal window when clicking outside the modal   Can someone share jQuery code to do this

User · Answer

Just add these two things  data-backdrop  static   data-keyboard  false    It will look like this now   lt div class  modal fade bs-example-modal-sm  id  myModal  data-backdrop  static  data-keyboard  false  tabindex  -1  role  dialog  aria-labelledby  mySmallModalLabel  aria-hidden  true  gt    It will disable the escape button and also the click anywhere and hide

User · Answer

If you want to conditionally disable the backdrop click closing feature  You can use the following line to set the backdrop option to static during runtime   Bootstrap v3 xx  jQuery   MyModal   data  bs modal   options backdrop    static     Bootstrap v2 xx  jQuery   MyModal   data  modal   options backdrop    static     This will prevent an already instantiated model with backdrop option set to false  the default behavior   from closing

User · Answer

The best I found is add this code to the link   lt  -- Link -- gt   lt a href   mdl  role  button   data-backdrop  static  data-keyboard  false  data-toggle  modal  id team     gt  lt  a gt   lt -- Div -- gt   lt div id  mdl  class  modal hide fade  tabindex  -1  role  dialog  data-keyboard  false  data-backdrop  static  gt  lt  div gt

User · Answer

Just set the backdrop property to  static        myModal   modal     backdrop   static     keyboard  true      You may also want to set the keyboard property to false because that prevents the modal from being closed by pressing the Esc key on the keyboard       myModal   modal     backdrop   static     keyboard  false      myModal is the ID of the div that contains your modal content

User · Answer

To Update the backdrop state in Bootstrap 4 1 3 after the modal have been Display  We used the following line from Bootstrap-Modal-Wrapper plugin  Plugin Repository code reference       yourModalElement   data  bs modal    config backdrop    true    static

User · Answer

Doing that is very easy nowadays  Just add   data-backdrop  static  data-keyboard  false     In your modal divider

User · Answer

The solution presented as an answer does not work  what is wrong   x000D   x000D    document  ready function                    modal   modal  show                    modal   modal                 backdrop   static                 keyboard  false                            x000D   lt html gt      lt head gt           lt script src  https   code jquery com jquery-3 5 1 slim min js  integrity  sha384-DfXdz2htPH0lsSSs5nCTpuj zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj  crossorigin  anonymous  gt  lt  script gt           lt script src  https   cdn jsdelivr net npm popper js 1 16 1 dist umd popper min js  integrity  sha384-9 reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU 6BZp6G7niu735Sk7lN  crossorigin  anonymous  gt  lt  script gt           lt script src  https   stackpath bootstrapcdn com bootstrap 4 5 2 js bootstrap min js  integrity  sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8 KUEfYiJOMMV rV  crossorigin  anonymous  gt  lt  script gt           lt script src  https   cdn jsdelivr net npm octicons 8 5 0 index min js  gt  lt  script gt           lt link rel  stylesheet  href  https   stackpath bootstrapcdn com bootstrap 4 5 2 css bootstrap min css  integrity  sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP VmmDGMN5t9UJ0Z  crossorigin  anonymous  gt           lt link href  https   fonts googleapis com icon family Material Icons  rel  stylesheet  gt      lt  head gt          lt body gt                   lt div class  modal fade  id  exampleModal  tabindex  -1  role  dialog  aria-labelledby  exampleModalLabel  aria-hidden  true  gt             lt div class  modal-dialog  role  document  gt               lt div class  modal-content  gt                 lt div class  modal-header  gt                   lt button type  button  class  close  data-dismiss  modal  aria-label  Close  gt                     lt span aria-hidden  true  gt  amp times  lt  span gt                   lt  button gt                 lt  div gt                 lt div class  modal-body  gt                 lt  div gt                 lt div class  modal-footer  gt                   lt div class  text-right  gt  lt button type  button  class  btn btn-primary  gt print lt  button gt  lt  div gt               lt  div gt               lt  div gt             lt  div gt           lt  div gt      lt  body gt   lt  html gt  x000D   x000D   x000D

User · Answer

You can set default behavior of modal popup by using of below line of code      fn modal prototype constructor Constructor DEFAULTS backdrop    static

User · Answer

In case anyone comes here from Google trying to figure out how to prevent someone from closing a modal  don t forget that there s also a close button on the top right of the modal that needs to be removed   I used some CSS to hide it    Modal  modal-header button close       visibility  hidden      Note that using  display  none   gets overwritten when the modal is created  so don t use that

User · Answer

document  ready function e         quot  modalId quot   modal        backdrop   static        keyboard  false       show  false              quot backdrop  static  quot  will prevent closing modal when clicking outside of it   quot keyboard  false quot  specifies that the modal can be closed from escape key  Esc   quot show  false quot  will hide the modal when the page has finished loading

User · Answer

Try main line with   lt div class  quot modal fade quot  id  quot myModal quot  tabindex  quot -1 quot  role  quot dialog quot  aria-labelledby  quot verifyModalLabel quot  aria-hidden  quot true quot  gt

User · Answer

Yes  you can do it like this    lt div id  myModal   tabindex  -1  role  dialog       aria-labelledby  myModalLabel       aria-hidden  true       data-backdrop  static   data-keyboard  false  gt

User · Answer

lt button type  button  class  btn btn-info btn-md  id  myBtn3  gt Static  Modal lt  button gt    lt  -- Modal -- gt   lt div class  modal fade  id  myModal3  role  dialog  gt   lt div class  modal-dialog  gt     lt  -- Modal content-- gt     lt div class  modal-content  gt       lt div class  modal-header  gt         lt button type  button  class  close  data-dismiss  modal  gt    lt  button gt         lt h4 class  modal-title  gt Static Backdrop lt  h4 gt       lt  div gt       lt div class  modal-body  gt         lt p gt You cannot click outside of this modal to close it  lt  p gt       lt  div gt       lt div class  modal-footer  gt         lt button type  button  class  btn btn-default  data-       dismiss  modal  gt Close lt  button gt       lt  div gt      lt  div gt     lt  div gt   lt  div gt      lt script gt          myBtn3   click function             myModal3   modal  backdrop   static                       lt  script gt

User · Answer

As D3VELOPER says  the following code resolve it       modal   removeData  bs modal   modal  backdrop   static   keyboard  false      I m using both jquery  amp  bootstrap and simply removeData  modal   don t work

User · Answer

I believe you want to set the backdrop value to static  If you want to avoid the window to close when using the Esc key  you have to set another value   Example    lt a data-controls-modal  your div id     data-backdrop  static     data-keyboard  false     href     gt    OR if you are using JavaScript       myModal   modal     backdrop   static     keyboard  false

User · Answer

You can disable the background s click-to-close behavior and make this the default for all your modals by adding this JavaScript to your page  make sure it is executed after jQuery and Bootstrap JS are loaded      function           fn modal Constructor DEFAULTS backdrop    static

User · Answer

Override the Bootstrap    hide    event of Dialog and stop its default behavior  to dispose the dialog    Please see the below code snippet          yourDialogID   on  hide bs modal   function e            e preventDefault             It works fine in our case

User · Answer

You can also include these attributes in the modal definition itself    lt div class  modal hide fade  data-keyboard  false  data-backdrop  static  gt

User · Answer

Well  this is another solution that some of you guys might be looking for  as I was     My problem was similar  the modal box was closing while the iframe I had inside was loading  so I had to disable the modal dismiss until the Iframe finishes loading  then re-enable   The solutions presented here were not working 100    My solution was this   showLocationModal   function loc        var is loading   true       if is loading     true             is loading    false          var  modal         locationModal              modal modal  show true                prevent Modal to close before the iframe is loaded          modal on  hide   function  e                if is loading     true                    e preventDefault                    return false                                       populate Modal          modal find   modal-body iframe   hide   attr  src   location link  load function                 is loading   true                 So I temporarily prevent the Modal from closing with    modal on  hide   function  e        if is loading     true            e preventDefault            return false             But ith the var is loading that will re enable closing after the Iframe has loaded

User · Answer

Kind of like  AymKdn s answer  but this will allow you to change the options without re-initializing the modal       myModal   data  modal   options keyboard   false    Or if you need to do multiple options  JavaScript s with comes in handy here   with      myModal   data  modal   options        backdrop    static       keyboard   false      If the modal is already open  these options will only take effect the next time the modal is opened

User · Answer

If you already have initialized the modal window  then you may want to reset the options with     myModal   removeData  modal   modal  backdrop   static   keyboard  false   to make sure it will apply the new options

[jquery] Disallow Twitter Bootstrap modal window from closing

Examples related to jquery

Examples related to twitter-bootstrap

Examples related to mouseclick-event

[jquery] Disallow Twitter Bootstrap modal window from closing

Examples related to jquery

Examples related to twitter-bootstrap

Examples related to modal-dialog

Examples related to mouseclick-event