Disable click outside of bootstrap modal area to close modal

Question

I am making a bootstrap website  with a couple of Bootstrap  Modals   I m trying to customize some of the default features   Problem is this  You can close the modal by clicking on the background  Is there anyway to disable this feature  On specifc modals only   Bootstrap modal page

User · Answer

For Bootstrap 4 x  you can do like this       modal   data  bs modal    config backdrop    static       modal   data  bs modal    config keyboard   false

User · Answer

If you are using  ng-bootstrap use the following    Component  import   Component  OnInit   from   angular core   import   NgbModal   from   ng-bootstrap ng-bootstrap     Component     selector   example     templateUrl     example component html     styleUrls      example component scss       export class ExampleComponent implements OnInit      constructor      private ngbModal  NgbModal           ngOnInit    void          openModal exampleModal  any   event  any        this ngbModal open exampleModal          size   lg      set modal size       backdrop   static      disable modal from closing on click outside       keyboard  false     disable modal closing by keyboard esc                 Template   lt div  click   openModal exampleModal   event   gt   lt  div gt       lt ng-template  exampleModal let-modal gt           lt div class  modal-header  gt               lt h5 class  modal-title  gt Test modal lt  h5 gt           lt  div gt           lt div class  modal-body p-3  gt               lt form action    gt                   lt div class  form-row  gt                       lt div class  form-group col-md-6  gt                           lt label for    gt Test field 1 lt  label gt                           lt input type  text  class  form-control  gt                       lt  div gt                       lt div class  form-group col-md-6  gt                           lt label for    gt Test field 2 lt  label gt                           lt input type  text  class  form-control  gt                       lt  div gt                        lt div class  text-right pt-4  gt                           lt button type  button  class  btn btn-light   click   modal dismiss  Close    gt Close lt  button gt                           lt button class  btn btn-primary ml-1  gt Save lt  button gt                       lt  div gt               lt  form gt           lt  div gt       lt  ng-template gt    This code was tested on angular 9 using      ng-bootstrap ng-bootstrap     6 1 0    bootstrap     4 4 1

User · Answer

Checkout This      x000D   x000D    document  ready function     x000D          popup   modal   x000D          show  false  x000D          backdrop   static  x000D          x000D       x000D          click-me   click function     x000D             popup   modal  show                 x000D          x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt link href  http   cdnjs cloudflare com ajax libs twitter-bootstrap 2 3 1 css bootstrap css  rel  stylesheet   gt  x000D   lt script src  http   cdnjs cloudflare com ajax libs twitter-bootstrap 2 3 1 js bootstrap min js  gt  lt  script gt  x000D   lt  DOCTYPE html gt  x000D       lt html lang  en  gt  x000D       lt head gt  x000D           lt meta charset  utf-8  gt  x000D           lt link href    netdna bootstrapcdn com twitter-bootstrap 2 1 0 css bootstrap-combined min css  rel  stylesheet  gt  x000D           lt  head gt  x000D       lt body gt  x000D           lt div class  modal  id  popup  style  display  none   gt  x000D               lt div class  modal-header  gt  x000D                   lt button type  button  class  close  data-dismiss  modal  aria-hidden  true  gt    lt  button gt  x000D                   lt h3 gt Standard Selectpickers lt  h3 gt  x000D               lt  div gt  x000D               lt div class  modal-body  gt  x000D                   x000D                   lt select class  selectpicker  data-container  body  gt  x000D                       lt option gt Mustard lt  option gt  x000D                       lt option gt Ketchup lt  option gt  x000D                       lt option gt Relish lt  option gt  x000D                   lt  select gt  x000D   x000D               lt  div gt  x000D               lt div class  modal-footer  gt  x000D                   lt button class  btn  data-dismiss  modal  aria-hidden  true  gt Close lt  button gt  x000D                   lt button class  btn btn-primary  gt Save changes lt  button gt  x000D               lt  div gt  x000D           lt  div gt  x000D           lt a id  click-me  class  btn btn-primary  gt Click Me lt  a gt   x000D       lt  body gt  x000D           lt script type  text javascript  src    netdna bootstrapcdn com twitter-bootstrap 2 1 0 js bootstrap min js  gt  lt  script gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

There are two ways to disable click outside of bootstrap model area to close modal-   using javascript      myModal   modal      backdrop   static      keyboard  false      using data attribute in HTML tag  data-backdrop  static  data-keyboard  false    write this attributes in that button where you click to open the modal popup

User · Answer

In my application  I am using the below piece of code to show Bootstrap modal via jQuery        myModall   modal                           backdrop   static                           keyboard  true                           show  true

User · Answer

You can also do this without using JQuery  like so    lt div id  myModal  gt   var modal   document getElementById  myModal    modal backdrop    static   modal keyboard   false

User · Answer

The solution that work for me is the following        myModal   modal  backdrop   static   keyboard  false       backdrop  disabled the click outside event  keyboard  disabled the scape keyword event

User · Answer

Try this    lt div   class  modal fade    id  customer bill gen    data-keyboard  false    data-backdrop  static   gt

User · Answer

Use this if you want to disable the outer click for all modals using jQuery  Add this script to your Javascript after jQuery   jQuery document  ready function          jQuery   data-toggle  modal     each function             jQuery this  attr  data-backdrop   static           jQuery this  attr  data-keyboard   false

User · Answer

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

User · Answer

Use this CSS for Modal and modal-dialog  modal      pointer-events  none      modal-dialog      pointer-events  all      This can resolve your problem in Modal

User · Answer

none of these solutions worked for me    I have a terms and conditions modal that i wanted to force people to review before continuing   the defaults  static  and  keyboard  as per the options made it impossible to scroll down the page as the terms and conditions are a few pages log  static was not the answer for me   So instead i went to unbind the the click method on the modal  with the following i was able to get the desired effect        modal   off  click

User · Answer

Add the below css as per you want your screen width    media  min-width  991px        modal-dialog           margin  0px 179px  important

User · Answer

if you want to change default  for bootstrap 3 x    fn modal prototype constructor Constructor DEFAULTS backdrop    static     fn modal prototype constructor Constructor DEFAULTS keyboard    false   for bootstrap 4 x    fn modal prototype constructor Constructor Default backdrop    static     fn modal prototype constructor Constructor Default keyboard    false

User · Answer

You can use an attribute like this  data-backdrop  static  or with javascript         myModal   modal       backdrop   static       keyboard  false     to prevent closing with Esc button  if you want this too       See this answer too  Disallow twitter bootstrap modal window from closing

User · Answer

You can Disallow closing of  signUp  This should be the id of the modal  modal when clicking outside of modal  As well as on ESC button  jQuery   signUp   on  shown bs modal   function         jQuery this  data  bs modal   options backdrop    static     For outside click of modal      jQuery this  data  bs modal   options keyboard   false    For ESC button

User · Answer

lt div class  modal fade  id  myModal  tabindex  -1  role  dialog  aria-labelledby  myModalLabel  aria-hidden  true  data-keyboard  false  data-backdrop  static  gt    try this During my application development    I also met the trouble that default values for a model attribute    data-keyboard  true                data-backdrop  non static   Hope this will help you

User · Answer

data-keyboard  quot false quot  data-backdrop  quot static quot  in your html code for start of modal Box div

User · Answer

Another option if you do not know if the modal has already been opened or not yet and you need to configure the modal options      Bootstrap 3 4   var  modal       modal    var keyboard   false     Prevent to close by ESC var backdrop    static      Prevent to close on click outside the modal  if typeof  modal data  bs modal        undefined        Modal did not open yet      modal modal           keyboard  keyboard          backdrop  backdrop           else      Modal has already been opened      modal data  bs modal   options keyboard   keyboard       modal data  bs modal   options backdrop   backdrop       if keyboard     false              modal off  keydown dismiss bs modal       Disable ESC       else                modal data  bs modal   escape       Resets ESC              Bootstrap 4 3    var  modal       modal    var keyboard   false     Prevent to close by ESC var backdrop    static      Prevent to close on click outside the modal  if typeof  modal data  bs modal        undefined        Modal did not open yet      modal modal           keyboard  keyboard          backdrop  backdrop           else      Modal has already been opened      modal data  bs modal    config keyboard   keyboard       modal data  bs modal    config backdrop   backdrop       if keyboard     false              modal off  keydown dismiss bs modal       Disable ESC       else                modal data  bs modal   escape       Resets ESC           Change options to  config

User · Answer

This is the easiest one  You can define your modal behavior  defining data-keyboard and data-backdrop    lt div id  modal  class  modal hide fade in  data-keyboard  false  data-backdrop  static  gt

User · Answer

This solution worked for me      myModal   modal  backdrop   static   keyboard  false      with data-backdrop  quot static quot  data-keyboard  quot false quot  in the button witch launch the Modal

User · Answer

I was missing modal-dialog that s why my close modal wasn t working properly

User · Answer

On Options chapter  in the page you linked  you can see the backdrop option  Passing this option with value  static  will prevent closing the modal  As  PedroVagner pointed on comments  you also can pass  keyboard  false  to prevent closing the modal by pressing Esc     If you opening the modal by js use         myModal   modal  backdrop   static   keyboard  false       If you are using data attributes  use         lt button data-target   myModal  data-toggle  modal  data-backdrop  static  data-keyboard  false  gt      Launch demo modal   lt  button gt

User · Answer

TLDR  backdrop   static   https   getbootstrap com docs 3 3 javascript  modals-options     specify static for a backdrop which doesn t close the modal on click

[javascript] Disable click outside of bootstrap modal area to close modal

Examples related to javascript

Examples related to css

Examples related to twitter-bootstrap

[javascript] Disable click outside of bootstrap modal area to close modal

Examples related to javascript

Examples related to css

Examples related to twitter-bootstrap

Examples related to modal-dialog