Pregunta No permitir que la ventana modal de Twitter Bootstrap se cierre


Estoy creando una ventana modal usando Twitter Bootstrap. El comportamiento predeterminado es si hace clic fuera del área modal, el modal se cerrará automáticamente. Me gustaría desactivar eso, es decir, no cerrar la ventana modal al hacer clic fuera del modal.

¿Alguien puede compartir el código jQuery para hacer esto?


508
2018-03-27 17:10


origen


Respuestas:


Creo que quieres establecer el valor de contexto a estático. Si desea evitar que la ventana se cierre al usar el Esc clave, tienes que establecer otro valor.

Ejemplo:

<a data-controls-modal="your_div_id"
   data-backdrop="static"
   data-keyboard="false"
   href="#">

O si está usando JavaScript:

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

650
2018-03-27 17:18



Solo configura el backdrop propiedad a 'static'.

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

Es posible que también desee configurar el keyboard propiedad a false porque eso impide que el modal se cierre presionando el Esc tecla en el teclado.

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

myModal es el ID del div que contiene su contenido modal.


305
2017-07-12 00:36



También puede incluir estos atributos en la definición modal en sí:

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

208
2018-01-09 03:34



Si ya ha inicializado la ventana modal, entonces es posible que desee restablecer las opciones con $('#myModal').removeData("modal").modal({backdrop: 'static', keyboard: false}) para asegurarse de que aplicará las nuevas opciones.


46
2017-07-19 16:41



Anule el evento Bootstrap 'ocultar' de Diálogo y detenga su comportamiento predeterminado (para deshacerse del diálogo).

Por favor vea el siguiente fragmento de código:

   $('#yourDialogID').on('hide.bs.modal', function(e) {

       e.preventDefault();
   });

Funciona bien en nuestro caso.


32
2017-08-06 11:54



Sí, puedes hacerlo así:

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

28
2018-01-01 17:54



Algo así como la respuesta de @AymKdn, pero esto le permitirá cambiar las opciones sin volver a inicializar el modal.

$('#myModal').data('modal').options.keyboard = false;

O si necesita hacer múltiples opciones, JavaScript with ¡es útil aquí!

with ($('#myModal').data("modal").options) {
    backdrop = 'static';
    keyboard = false;
}

Si el modal ya está abierto, estas opciones solo tendrán efecto la próxima vez el modal se abre


22
2018-04-25 22:10



Solo agrega estas dos cosas

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

Se verá así ahora

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

Deshabilitará el botón de escape y también el clic en cualquier lugar y ocultar.


12
2018-05-16 17:55



Puede desactivar el comportamiento de clic para cerrar del fondo y hacer que este sea el valor predeterminado para todos sus modales al agregar este JavaScript a su página (asegúrese de que se ejecute después de que se carguen JQuery y Bootstrap JS):

$(function() {
    $.fn.modal.Constructor.DEFAULTS.backdrop = 'static';
});

11
2017-09-30 20:05