Evitar cierre de modal cuando se hace click fuera de él en bootstrap

19-03-2024

 

¿Cómo evito que al tener una modal de Boostrap abierta y se le de click con el mouse en la parte fuera de la ventana modal o fondo no se salga de la ventana modal?

Como aquí voy a tratar de los ejemplos de Carousel Modal (Gallery 1 y Gallery 2), nos basamos en su código.

En la primera línea del modal:

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-hidden="true">

Desde html:

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">

Desde jQuery:

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

Otros atributos data:

backdrop: Incluye un elemento modal-backdrop. Como alternativa, especifique `static` para un fondo que no cierre el modal en click.

keyboard: Con valor `booleano: true` evita cerra el modal cuando se presiona la tecla `escape`.

show: Muestra el modal cuando se inicializa.

remote: deprecado desde v3.3.0. Carga desde una vía remota el contenido del modal.

Referencia completa

Modal en Bootstrap

Como se muestra en la documentación de Bootstrap, se pueden pasar opciones al momento de crear un diálogo modal.

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

  • backdrop: booleano para establecer si se presenta un elemento de fondo. Alternativamente, se puede usar static para que aparezca pero no se cierre al hacer click.

  • keyboard: booleano para establecer si se cierra el modal al presionar Esc.

Referencias

  stackoverflow - Evitar cierre de modal cuando se hace click fuera de él en bootstrap

 

 

 
error: Contenido protegido