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

can you please tell me which event is called in this situation. $scope.ok , $scope.$dismiss i have implement for submit and abort but i don't know the event fired in this situation. — LoveToCode, Mar 31 '16 at 09:01

Doguita · Accepted Answer · 2015-08-06T19:42:43.350

1187

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:

 <button data-target="#myModal" data-toggle="modal" data-backdrop="static" data-keyboard="false">
    Launch demo modal
 </button>`

edited Aug 06 '15 at 19:42

answered Mar 05 '14 at 20:36

Doguita

15,403
3
27
36

1

is there a way to keep the background able to register the clicks for other controls but just not close the modals ? – vivekanon Oct 07 '15 at 19:14
5

@mystikacid You should ask a new question for that. It will be better to help you with your problem and other users searching a similar solution. – Doguita Oct 07 '15 at 19:29
@Doguita : Here : http://stackoverflow.com/questions/33000898/bootstrap-modal-disable-close-on-backdrop-click-without-disabling-the-backgrou – vivekanon Oct 07 '15 at 19:33
18

Had a simple but irritating problem, make sure you place the jquery line before `$('#modal').modal('show');` Hope this helps! – cwiggo Oct 14 '15 at 09:06
5

cwiggo you don't use modal $('#modal').modal('show'); - you just use .modal({backdrop: 'static', keyboard: false}) - without any show or toggle command – TV-C-1-5 Jul 24 '17 at 19:57
1

Bootstrap 3 documentation with these options: https://getbootstrap.com/docs/3.4/javascript/#modals-options – Katie Jun 18 '19 at 20:29
2

Bootstrap 5 requires the `data-bs-toggle` and `data-bs-target` attributes. – Marco Siffert May 17 '21 at 13:04

score 201 · Answer 2 · answered Jun 05 '15 at 04:37

201

This is the easiest one

You can define your modal behavior, defining data-keyboard and data-backdrop.

<div id="modal" class="modal hide fade in" data-keyboard="false" data-backdrop="static">

answered Jun 05 '15 at 04:37

Sushan

3,153
2
23
21

4

This is the only thing that worked for me. Passing in the options in JS directly just didn't work for me for some reason (version 3.3.7). If anyone else corroborates, I might open an issue with the Bootstrap team. – Dennis Hackethal Feb 28 '17 at 05:13
1

At first, using js version didn't work for me too because I was setting everything after I opened the modal. You should do this "$('#modalForm').modal({ backdrop: 'static', keyboard: false });" before this "$('#modalForm').modal('show');". But for me, the best answer is from @ಅನಿಲ್ – Lucas Jun 07 '17 at 19:55
1

This worked for me. Putting the `data-backdrop="static"` option on the modal definition, not the trigger button that opens the modal as specified in other answers, worked for me. – TSmith Apr 19 '19 at 14:26
2

I've solved using only data-backdrop="static". You can see here : https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_modal_backdrop_data&stacked=h – Carmine Checker Apr 22 '21 at 05:24

score 106 · Answer 3 · edited May 23 '17 at 12:10

106

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

edited May 23 '17 at 12:10

Community

1
1

answered Mar 05 '14 at 19:53

Antonis Grigoriadis

2,060
2
16
26

this is best answer. – Kamlesh Nov 04 '19 at 12:04

score 47 · Answer 4 · edited Oct 12 '16 at 06:48

47

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
                });

edited Oct 12 '16 at 06:48

Peter Munnings

3,309
1
30
43

answered Mar 31 '16 at 18:09

ಅನಿಲ್

606
5
7

1

This is good answer because this code will work only when modal is open. – Deepak Dholiyan Apr 18 '19 at 11:43

score 35 · Answer 5 · answered May 09 '17 at 17:22

35

You can use

$.fn.modal.prototype.constructor.Constructor.DEFAULTS.backdrop = 'static';
$.fn.modal.prototype.constructor.Constructor.DEFAULTS.keyboard =  false;

to change the default behavior.

answered May 09 '17 at 17:22

David Navarro Astudillo

1,329
11
20

Great answer, as it handles the situation for all modals. – Haris ur Rehman Aug 07 '17 at 12:08
2

In bootstrap v4, the syntax is: $.fn.modal.prototype.constructor.Constructor.Default.backdrop = 'static'; – Garry English Jun 01 '20 at 20:05
@HarisurRehman The asker wanted it to be enforced on specific modals though... – Daniel Wu Aug 27 '20 at 05:13
@DanielWu depends on how you read the question. – Lukas Jun 21 '21 at 19:24

score 28 · Answer 6 · edited Aug 15 '22 at 11:24

28

Put this code in the first block of your modal html

Bootstrap 4.x

data-keyboard="false" data-backdrop="static"

Boostrap 5.x

data-bs-keyboard="false" data-bs-backdrop="static"

Example:

<div id="modal-user" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" data-bs-keyboard="false" data-bs-backdrop="static">

Docs bootstrap 5: https://getbootstrap.com/docs/5.1/components/modal/#options

Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click.

edited Aug 15 '22 at 11:24

plonknimbuzz

2,594
2
19
31

answered Feb 25 '21 at 04:42

Deepa Rokhade

411
4
4

Please add some explanation. Why do you think your proposed solution might help the OP. – Tyler2P Feb 25 '21 at 10:30
1

Put this on the same div where you put class="modal" – Daniel Wu Apr 13 '22 at 06:20

score 14 · Answer 7 · answered Nov 26 '16 at 04:43

Checkout This ::

$(document).ready(function() {
    $("#popup").modal({
        show: false,
        backdrop: 'static'
    });
    
    $("#click-me").click(function() {
       $("#popup").modal("show");             
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css" rel="stylesheet">
        </head>
    <body>
        <div class="modal" id="popup" style="display: none;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3>Standard Selectpickers</h3>
            </div>
            <div class="modal-body">
                
                <select class="selectpicker" data-container="body">
                    <option>Mustard</option>
                    <option>Ketchup</option>
                    <option>Relish</option>
                </select>

            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                <button class="btn btn-primary">Save changes</button>
            </div>
        </div>
        <a id="click-me" class="btn btn-primary">Click Me</a> 
    </body>
        <script type="text/javascript" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
</html>

score 14 · Answer 8 · edited May 21 '17 at 19:48

14

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.

edited May 21 '17 at 19:48

Shehary

9,926
10
42
71

answered Mar 03 '17 at 06:42

Gaurav Tripathi

1,265
16
20

Cava · Answer 9 · 2019-03-21T18:26:55.003

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

for Bootstrap 4 + should it be `_setEscapeEvent()` instead of `.escape()`? — Ivan Bacher, Aug 22 '19 at 13:04

score 12 · Answer 10 · answered Dec 07 '20 at 05:16

12

Use this CSS for Modal and modal-dialog

.modal{
    pointer-events: none;
}

.modal-dialog{
    pointer-events: all;
 }

This can resolve your problem in Modal

answered Dec 07 '20 at 05:16

Muthukumar

121
1
2

Best option if you would like to turn it off for every modal in application – Piotr Śródka Jan 19 '21 at 16:24
2

But it turns off browser scroll :( – Piotr Śródka Jan 19 '21 at 16:33
`pointer-events: all;` is only for SVG – run_the_race Aug 30 '22 at 09:46

score 8 · Answer 11 · edited Feb 25 '20 at 03:10

8

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static">

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!

edited Feb 25 '20 at 03:10

Sehdev

5,486
3
11
34

answered Aug 28 '19 at 12:02

Deepalakshmi

81
1
1

score 7 · Answer 12 · answered Jul 18 '18 at 21:42

7

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

answered Jul 18 '18 at 21:42

Jorge Santos Neill

1,635
13
6

score 7 · Answer 13 · edited Jan 27 '21 at 15:36

7

This solution worked for me:

$('#myModal').modal({backdrop: 'static', keyboard: false})

with data-backdrop="static" data-keyboard="false"

in the button witch launch the Modal

edited Jan 27 '21 at 15:36

codedge

4,754
2
22
38

answered Jan 27 '21 at 15:24

Soukaina WARACH

81
1
7

score 6 · Answer 14 · edited Jul 19 '19 at 13:27

6

Try this:

<div
  class="modal fade"
  id="customer_bill_gen"
  data-keyboard="false"
  data-backdrop="static"
>

edited Jul 19 '19 at 13:27

Egghead

6,837
5
20
38

answered Jul 19 '19 at 10:03

Vijay Chauhan

1,282
19
18

Moin Uddin · Answer 15 · 2022-08-09T18:37:33.597

5

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 and 5.x:

$.fn.modal.prototype.constructor.Constructor.Default.backdrop = 'static';
$.fn.modal.prototype.constructor.Constructor.Default.keyboard =  false;

edited Aug 09 '22 at 18:37

answered Jun 27 '20 at 06:50

Moin Uddin

148
2
9

score 4 · Answer 16 · edited May 30 '20 at 13:22

4

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');
    });
});

edited May 30 '20 at 13:22

marc_s

732,580
175
1,330
1,459

answered May 30 '20 at 13:08

Disapamok

1,426
2
21
27

Hamfri · Answer 17 · 2020-05-14T18:35:45.583

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

<div (click)="openModal(exampleModal, $event)"> </div>
    <ng-template #exampleModal let-modal>
        <div class="modal-header">
            <h5 class="modal-title">Test modal</h5>
        </div>
        <div class="modal-body p-3">
            <form action="">
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="">Test field 1</label>
                        <input type="text" class="form-control">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="">Test field 2</label>
                        <input type="text" class="form-control">
                    </div>

                    <div class="text-right pt-4">
                        <button type="button" class="btn btn-light" (click)="modal.dismiss('Close')">Close</button>
                        <button class="btn btn-primary ml-1">Save</button>
                    </div>
            </form>
        </div>
    </ng-template>

This code was tested on angular 9 using:

"@ng-bootstrap/ng-bootstrap": "^6.1.0",
"bootstrap": "^4.4.1",

score 2 · Answer 18 · edited Feb 13 '21 at 12:37

2

For Bootstrap 4.x, you can do like this :

$('#modal').data('bs.modal')._config.backdrop = 'static';
$('#modal').data('bs.modal')._config.keyboard = false;

edited Feb 13 '21 at 12:37

STA

30,729
8
45
59

answered Feb 13 '21 at 08:54

jose noguera

21
1

2

While this code may solve the question, [including an explanation](//meta.stackexchange.com/q/114762) of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please [edit] your answer to add explanations and give an indication of what limitations and assumptions apply. – Yunnosch Feb 13 '21 at 09:08
Also, please make the addtional insight more obvious which your answer contributes in addition to existing answers, like the one by @MoinUddin – Yunnosch Feb 13 '21 at 09:10

Geoffrey Hale · Answer 19 · 2018-12-11T23:32:31.947

1

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.

edited Dec 11 '18 at 23:32

answered Dec 06 '18 at 21:34

Geoffrey Hale

10,597
5
44
45

score 1 · Answer 20 · answered Aug 28 '19 at 07:17

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');

score 0 · Answer 21 · answered Feb 14 '19 at 07:20

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.
})

score 0 · Answer 22 · answered Sep 19 '20 at 19:35

0

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

answered Sep 19 '20 at 19:35

Chirag Joshi

409
1
4
13

score -1 · Answer 23 · answered May 16 '18 at 10:22

-1

You can also do this without using JQuery, like so:

<div id="myModal">

var modal = document.getElementById('myModal');
modal.backdrop = "static";
modal.keyboard = false;

answered May 16 '18 at 10:22

Sirar Salih

2,514
2
19
18

score -2 · Answer 24 · answered Apr 12 '18 at 06:06

-2

Add the below css as per you want your screen width.

@media (min-width: 991px){
    .modal-dialog {
        margin: 0px 179px !important;
    }
}

answered Apr 12 '18 at 06:06

Atul

1
2

Disable click outside of bootstrap modal area to close modal

24 Answers24

TLDR

Linked

Related