html - when - ¿Evita que Bootstrap Modal desaparezca al hacer clic fuera o al presionar escape?

modal not close on click outside

Question

Estoy utilizando el modo de inicio de Twitter como una ventana de asistente, y me gustaría evitar que el usuario lo cierre al hacer clic fuera del modo o al presionar escape. En su lugar, quiero que se cierre cuando el usuario presiona el botón Finalizar. ¿Cómo podría lograr este escenario?

Answer 1

Simplemente agregue data-backdrop="static" atributos data-backdrop="static" y data-keyboard="false" a ese modal.

P.ej.

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

Answer 2

El siguiente guión funcionó para mí:

// prevent event when the modal is about to hide
$(''#myModal'').on(''hide.bs.modal'', function (e) {
e.preventDefault();
e.stopPropagation();
return false;
});

Answer 3

Puedes usar el siguiente código

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

para cambiar el comportamiento por defecto.

Answer 4

Si necesita configurar esto después de que se muestra el modal, puede usar la solución @Nabid. Sin embargo, a veces todavía es necesario permitir que algún método cierre el modal. Suponiendo que tenga un botón con la clase really-close-the-modal , que realmente debería cerrar el modal, puede usar este código (jquery):

var closeButtonClicked = false;
$(''.really-close-the-modal'').on(''click'', function () {
closeButtonClicked = true;
});
$(''#myModal'').on(''hide.bs.modal'', function (e) {
if (!closeButtonClicked) {
e.preventDefault();
e.stopPropagation();
return false;
}
closeButtonClicked = false;
});

Este no es un diseño de código realmente agradable, pero me ayudó en una situación donde se mostró el modal con una animación del cargador, hasta que se devolvió una solicitud ajax, y solo entonces podría saber si el modal debía configurarse para evitar "implícito" clausura. Puedes usar un diseño similar para evitar que se cierre el modal mientras aún se está cargando.

Answer 5

Si necesita deshabilitar hacer clic fuera pero habilitar presionando escape

$(''#myModal'').modal({ backdrop: ''static'', // This disable for click outside event keyboard: true // This for keyboard event })

Answer 6

Si usa JavaScript entonces:

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

y si HTML:

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

Answer 7

Su código funciona cuando hago clic fuera del modal, pero si uso input campo de input html dentro del cuerpo modal, entonces enfoque el cursor en esa entrada y luego presiona la tecla esc el modal se cerró. Haga click here

Answer 8

También funciona, data-backdrop="static" para hacer clic y data-keyboard="false" a Esc en tu div modal:

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

Answer 9

También puedes usar Direct in bootstrap model.

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

Answer 10

Yo uso estos atributos y funciona, data-keyboard="false" data-backdrop="static"

Answer 11

<button class="btn btn-primary btn-lg" data-backdrop="static" data-keyboard="false" data-target="#myModal" data-toggle="modal">

Answer 12

<div class="modal show">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body&hellip;</p>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

Creo que este codepen te puede ayudar a prevenir el cierre modal css y bootstrap

Answer 13

jQuery(''#modal_ajax'').modal(''show'', {backdrop: ''static'', keyboard: false});