jquery - fijo - No permitir que se cierre la ventana modal de Twitter Bootstrap

modal bootstrap fijo

Question

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 deshabilitar eso, es decir, no cerrar la ventana modal al hacer clic fuera del modal.

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

Answer 1

Algo así como la respuesta de @ AymKdn, pero esto te permitirá cambiar las opciones sin reiniciar el modal.

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

O si necesita hacer varias opciones, ¡JavaScript es muy ú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 que se abra el modal.

Answer 2

Anule el evento Bootstrap ''hide'' del diálogo y detenga su comportamiento predeterminado (para eliminar el 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.

Answer 3

Bueno, esta es otra solución que algunos de ustedes podrían estar buscando (como yo estaba ...)

Mi problema era similar, el cuadro modal se estaba cerrando mientras se estaba cargando el iframe que tenía dentro, así que tuve que deshabilitar el cierre modal hasta que el iframe termina de cargarse, luego volver a habilitarlo.

Las soluciones aquí presentadas no funcionaron al 100%.

Mi solución fue la siguiente:

showLocationModal = function(loc){
var is_loading = true;
if(is_loading === true) {
is_loading = false;
var $modal = $(''#locationModal'');
$modal.modal({show:true});
// prevent Modal to close before the iframe is loaded
$modal.on("hide", function (e) {
if(is_loading !== true) {
e.preventDefault();
return false
}
});
// populate Modal
$modal.find(''.modal-body iframe'').hide().attr(''src'', location.link).load(function(){
is_loading = true;
});
}};

Así que temporalmente evito que el Modal se cierre con:

$modal.on("hide", function (e) {
if(is_loading !== true) {
e.preventDefault();
return false
}
});

Pero con la var is_loading que volverá a habilitar el cierre después de que se haya cargado el iframe.

Answer 4

Como dice D3VELOPER, el siguiente código lo resuelve:

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

Estoy usando jquery y bootstrap y simplemente removeData(''modal'') no funciona.

Answer 5

Creo que quieres establecer el valor de fondo en estático . Si desea evitar que la ventana se cierre al usar la tecla Esc , debe establecer otro valor.

Ejemplo:

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

O si está utilizando JavaScript:

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

Answer 6

En caso de que alguien venga de Google tratando de averiguar cómo evitar que alguien cierre un modal, no olvide que también hay un botón de cierre en la parte superior derecha del modal que debe eliminarse.

Usé algo de CSS para ocultarlo:

#Modal .modal-header button.close {
visibility: hidden;
}

Tenga en cuenta que utilizando "display: none;" se sobrescribe cuando se crea el modal, así que no lo uses.

Answer 7

Hacer eso es muy fácil hoy en día. Solo agrega:

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

En su divisor modal.

Answer 8

Lo mejor que encontré es agregar este código al enlace.

<!-- Link -->
<a href="#mdl" role="button" data-backdrop="static" data-keyboard="false" data-toggle="modal" id_team="" ></a>
<-- Div -->
<div id="mdl" class="modal hide fade" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static"></div>

Answer 9

Para actualizar el estado del telón de fondo en Bootstrap 4.1.3 después de que se haya visualizado el modal, usamos la siguiente línea del complemento Bootstrap-Modal-Wrapper . Referencia de código de Plugin Repository .

$("#yourModalElement").data(''bs.modal'')._config.backdrop = (true : "static");

Answer 10

Puede configurar el comportamiento predeterminado de la ventana emergente modal utilizando la línea de código que se encuentra debajo:

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

Answer 11

Puede deshabilitar el comportamiento de clic para cerrar del fondo y hacer que este sea el predeterminado para todos sus modales agregando este JavaScript a su página (asegúrese de que se ejecute después de cargar jQuery y Bootstrap JS):

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

Answer 12

Sí, puedes hacerlo así:

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

Answer 13

Si desea deshabilitar condicionalmente la función de backdrop click closing . Puede usar la siguiente línea para establecer la opción de backdrop como static durante el tiempo de ejecución.

Bootstrap v3.xx

jQuery(''#MyModal'').data(''bs.modal'').options.backdrop = ''static'';

Bootstrap v2.xx

jQuery(''#MyModal'').data(''modal'').options.backdrop = ''static'';

Esto evitará que se cierre un modelo ya instanciado con la opción de backdrop configurada en false ( el comportamiento predeterminado ).

Answer 14

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

Answer 15

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 se ocultará.

Answer 16

Solo establece la propiedad de backdrop en ''static'' .

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

También es posible que desee establecer la propiedad del keyboard en false porque eso evita que se cierre el modal presionando la tecla Esc en el teclado.

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

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

Answer 17

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

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

Answer 18

<button type="button" class="btn btn-info btn-md" id="myBtn3">Static
Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal3" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Static Backdrop</h4>
</div>
<div class="modal-body">
<p>You cannot click outside of this modal to close it.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$("#myBtn3").click(function(){
$("#myModal3").modal({backdrop: "static"});
});
});
</script>