Deshabilite el clic fuera del área modal de bootstrap para cerrar modal

441

Estoy haciendo un sitio web de bootstrap, con un par de 'Modals' de Bootstrap. Estoy tratando de personalizar algunas de las funciones predeterminadas.

El problema es este; Puede cerrar el modal haciendo clic en el fondo. ¿Hay alguna forma de deshabilitar esta función? ¿Solo en modales específicos?

Página modal de Bootstrap

javascript  css  twitter-bootstrap  modal-dialog 
— Intelectual
fuente
¿podría decirme qué evento se llama en esta situación? $ scope.ok, $ scope. $ despido que he implementado para enviar y cancelar, pero no sé el evento que se activó en esta situación.
— LoveToCode
44
— tm

Respuestas:

913

En el capítulo Opciones, en la página que ha vinculado, puede ver la backdropopción. Pasar esta opción con valor 'static'evitará cerrar el modal.
Como @PedroVagner señaló en los comentarios, también puede pasar {keyboard: false}para evitar cerrar el modal presionando Esc.

Si abres el modal por js usa: 

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

Si está utilizando atributos de datos, use: 

 <button data-target="#myModal" data-toggle="modal" data-backdrop="static" data-keyboard="false">
    Launch demo modal
 </button>`
— Doguita
fuente
¿Hay alguna manera de mantener el fondo capaz de registrar los clics para otros controles pero simplemente no cerrar los modales?
— vivekanon
2
@mystikacid Deberías hacer una nueva pregunta para eso. Será mejor ayudarlo con su problema y a otros usuarios que buscan una solución similar.
— Doguita
— vivekanon
3
Tuve un problema simple pero irritante, asegúrese de colocar la línea jquery antes de ¡ $('#modal').modal('show');Espero que esto ayude!
— cwiggo
3
cwiggo no usas modal $ ('# modal'). modal ('show'); - solo usa .modal ({telón de fondo: 'estático', teclado: falso}) - sin ningún comando de mostrar o alternar
— TV-C-15
136

Esta es la más fácil

Puede definir su comportamiento modal, definiendo el teclado de datos y el fondo de datos.

<div id="modal" class="modal hide fade in" data-keyboard="false" data-backdrop="static">
— Sushan
fuente
2
Esto es lo único que funcionó para mí. Pasar las opciones en JS directamente no funcionó para mí por alguna razón (versión 3.3.7). Si alguien más lo corrobora, podría abrir un problema con el equipo de Bootstrap.
— dchacke
Al principio, usar la versión js tampoco funcionó para mí porque estaba configurando todo después de abrir el modal. Debe hacer esto "$ ('# modalForm'). Modal ({backdrop: 'static', keyboard: false});" antes de esto "$ ('# modalForm'). modal ('show');". Pero para mí, la mejor respuesta es de @ ಅನಿಲ್
— Lucas
Esto funcionó para mí. Poner la data-backdrop="static"opción en la definición modal, no el botón de activación que abre el modal como se especifica en otras respuestas, funcionó para mí.
— TSmith
34

En mi aplicación, estoy usando el siguiente código para mostrar el modo Bootstrap a través de jQuery.

 $('#myModall').modal({
                        backdrop: 'static',
                        keyboard: true, 
                        show: true
                });
— ಅನಿಲ್
fuente
Esta es una buena respuesta porque este código funcionará solo cuando modal esté abierto.
— Deepak Dholiyan
32

Puedes usar

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

para cambiar el comportamiento predeterminado.

— David Navarro Astudillo
fuente
Gran respuesta, ya que maneja la situación para todos los modales.
— Haris ur Rehman
1
En bootstrap v4, la sintaxis es: $ .fn.modal.prototype.constructor.Constructor.Default.backdrop = 'static';
— Garry Inglés
11

Hay dos formas de deshabilitar el clic fuera del área del modelo de bootstrap para cerrar modal-

  1. usando javascript

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

  2. usando el atributo de datos en la etiqueta HTML

    data-backdrop="static" data-keyboard="false" //write this attributes in that button where you click to open the modal popup.
— Gaurav Tripathi
fuente
9

Mira esto ::

$(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>
Expandir fragmento

— Sachin Sanchaniya
fuente
6

Otra opción si no sabe si el modal ya se ha abierto o no y necesita configurar las opciones modales:

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

Cambiar opciones a _config

— Cava
fuente
para Bootstrap 4 + debería ser en _setEscapeEvent()lugar de .escape()?
— Ivan Bacher
@IvanBacher funciona para mí usando .escape ()
— Cava
5

La solución que funciona para mí es la siguiente: 

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

telón de fondo: deshabilitó el evento de clic fuera

teclado: deshabilitó el evento de palabra clave de escape

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

intente esto, durante el desarrollo de mi aplicación ... También encontré el problema de que los valores predeterminados para un atributo modelo => data-keyboard="true" , =>data-backdrop="non static"

¡Espero que esto te ayudará!

— Deepalakshmi
fuente
3

Prueba esto:

<div
  class="modal fade"
  id="customer_bill_gen"
  data-keyboard="false"
  data-backdrop="static"
>
— Vijay Chauhan
fuente
Esto funcionó para mí, gracias .....
— Ajay Kumar
1

Ninguna de estas soluciones funcionó para mí.

Tengo un modal de términos y condiciones que quería obligar a las personas a revisar antes de continuar ... los valores predeterminados "estático" y "teclado" según las opciones hicieron imposible desplazarse hacia abajo de la página ya que los términos y condiciones son unas pocas páginas log, static no fue la respuesta para mí.

Entonces, en lugar de eso, desvinculé el método de clic en el modal, con lo siguiente pude obtener el efecto deseado.

$('.modal').off('click');

— RGB
fuente
0 
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.
})
— sonu pokade
fuente
0

Si está utilizando @ ng-bootstrap, use lo siguiente:

Componente

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

Modelo

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

Este código fue probado en angular 9 usando:

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

  2. "bootstrap": "^ 4.4.1",

— Hamfri
fuente
0

Use esto si desea deshabilitar el clic externo para todos los modales usando jQuery. Agregue este script a su Javascript después de jQuery.

jQuery(document).ready(function () {
    jQuery('[data-toggle="modal"]').each(function () {
       jQuery(this).attr('data-backdrop','static');
       jQuery(this).attr('data-keyboard','false');
    });
});
— Sahan
fuente
-1

También puede hacer esto sin usar JQuery, así:

<div id="myModal">

var modal = document.getElementById('myModal');
modal.backdrop = "static";
modal.keyboard = false;
— Sirar Salih
fuente
-2

Agregue el css a continuación según desee el ancho de su pantalla.

@media (min-width: 991px){
    .modal-dialog {
        margin: 0px 179px !important;
    }
}
— Atul
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.