Disable click outside of bootstrap modal area to close modal

JavascriptCssTwitter BootstrapModal Dialog

Javascript Problem Overview

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

Javascript Solutions

Solution 1 - Javascript

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>`

Solution 2 - Javascript

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">

Solution 3 - Javascript

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: https://stackoverflow.com/questions/9894339

Solution 4 - Javascript

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

Solution 5 - Javascript

You can use

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

to change the default behavior.

Solution 6 - Javascript

There are two ways to disable click outside of bootstrap model area to close modal-

  1. using javascript

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

  2. 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.

Solution 7 - Javascript

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>

Solution 8 - Javascript

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

Solution 9 - Javascript

Use this CSS for Modal and modal-dialog

.modal{
    pointer-events: none;
}

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

This can resolve your problem in Modal

Solution 10 - Javascript

<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!

Solution 11 - Javascript

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

Solution 12 - Javascript

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

Solution 13 - Javascript

Try this:

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

Solution 14 - Javascript

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;

Solution 15 - Javascript

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

Solution 16 - Javascript

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:

  1. "@ng-bootstrap/ng-bootstrap": "^6.1.0",

  2. "bootstrap": "^4.4.1",

Solution 17 - Javascript

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

Solution 18 - Javascript

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.

Solution 19 - Javascript

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

Solution 20 - Javascript

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

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

Solution 21 - Javascript

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

Solution 22 - Javascript

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

Solution 23 - Javascript

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

<div id="myModal">

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

Solution 24 - Javascript

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

@media (min-width: 991px){
    .modal-dialog {
        margin: 0px 179px !important;
    }
}
Categories
Recommended Javascript Solutions
Recommended Css Solutions
Recommended Twitter Bootstrap Solutions
Recommended Modal Dialog Solutions

Previous Solution:

How to resize a VirtualBox vmdk file

Virtualbox

Next Solution:

Is there a quick change tabs function in Visual Studio Code?

Visual Studio-CodeVscode Settings

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionEggheadView Question on Stackoverflow
Solution 1 - JavascriptDoguitaView Answer on Stackoverflow
Solution 2 - JavascriptSushanView Answer on Stackoverflow
Solution 3 - JavascriptAntonis GrigoriadisView Answer on Stackoverflow
Solution 4 - Javascriptಅನಿಲ್View Answer on Stackoverflow
Solution 5 - JavascriptDavid Navarro AstudilloView Answer on Stackoverflow
Solution 6 - JavascriptGaurav TripathiView Answer on Stackoverflow
Solution 7 - JavascriptSachin SanchaniyaView Answer on Stackoverflow
Solution 8 - JavascriptCavaView Answer on Stackoverflow
Solution 9 - JavascriptMuthukumarView Answer on Stackoverflow
Solution 10 - JavascriptDeepalakshmiView Answer on Stackoverflow
Solution 11 - JavascriptJorge Santos NeillView Answer on Stackoverflow
Solution 12 - JavascriptDeepa RokhadeView Answer on Stackoverflow
Solution 13 - JavascriptVijay ChauhanView Answer on Stackoverflow
Solution 14 - JavascriptMoin UddinView Answer on Stackoverflow
Solution 15 - JavascriptSoukaina WARACHView Answer on Stackoverflow
Solution 16 - JavascriptHamfriView Answer on Stackoverflow
Solution 17 - JavascriptDisapamokView Answer on Stackoverflow
Solution 18 - JavascriptGeoffrey HaleView Answer on Stackoverflow
Solution 19 - JavascriptraddrickView Answer on Stackoverflow
Solution 20 - Javascriptjose nogueraView Answer on Stackoverflow
Solution 21 - Javascriptsonu pokadeView Answer on Stackoverflow
Solution 22 - JavascriptChirag JoshiView Answer on Stackoverflow
Solution 23 - JavascriptSirar SalihView Answer on Stackoverflow
Solution 24 - JavascriptAtulView Answer on Stackoverflow