Evitar cierre de ventana Modal Bootstrap

Evitar cierre de ventana Modal Bootstrap. cuando estamos desarrollando a veces se necesita que la ventana modal no se cierre fácilmente, es decir al hacer clic fuera de la ventana o usando la tecla escape.

Para esta opción en este articulo detallaremos todos los pasos a seguir desde la versión Bootstrap 3 hasta la Bootstrap 5.

Evitar cierre de ventana Modal Bootstrap

Vamos a detallar esta opción para diferentes versiones de este popular framework

Para Versión Bootstrap 3:

Desde HTML:

En el HTML justo donde tenemos el Botón o enlace que ejecuta la ventana modal debemos de integrar los siguientes atributos.

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

Desde jQuery:

Por el contrario, si deseamos usar jQuery para este proceso debemos de agregar la siguiente línea de código.

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

Otros atributos data:

Las ventanas modales de Bootstrap poseen atributos que podemos utilizar para personalizar resultados finales y aquí les dejare una tabla de opciones.

|----------------------------------------------------------------------|
| backdrop | Incluye un elemento modal-backdrop. Como alternativa,     |
|          | especifique `static` para un fondo que no cierre el       |
|          | modal en clic.                                            |
|----------|--------------------------------------------------------   |
| 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                                    |
|----------|-----------------------------------------------------------|

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: Es 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: Es booleano para establecer si se cierra el modal al presionar la tecla  Esc.
Relacionado  Actualizar ventana padre desde popup: JavaScript Ejemplos
Relacionado  WhatsApp en tu web: Paso a paso como integrarlo

Versión Bootstrap 4.6

Esta versión del Framework también soporta la opción de evitar el cierre de ventana, solo debemos a agregar el atributo en el modal data-backdrop="static" y con eso se evitará que el usuario cierre la ventana modal.

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

Bootstrap 5.2

Si estamos usando la última versión del framework podemos usar el atributo data-bs-target="#staticBackdrop" para evitar el cierre de ventana modal. Veamos ejemplo completo

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
Launch static backdrop modal
</button>

Ventana Modal

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>

Conclusión

En este artículo hemos aprendido a utilizar el atributo de Bootstrap llamado backdrop que es utilizado para evitar el cierre de la ventana modal.

Relacionado  Tabla responsiva Bootstrap para lista de datos

Hemos aprendido a usar las opciones tanto en HTML, CSS y jQuery que posee este potencial framework.

Espero que esta explicación les ayude en sus proyectos web.

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuarlo!

Promedio de puntuación / 5. Recuento de votos:

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

Nestor Tapia

Nestor Tapia

Bloggero, amante de la programación PHP, innovador y me fascina compartir información. Desde que conocí el entorno informatico y el internet me llamó la atención la programación, Por tal motivo he creado mi blog BAULPHP.COM para compartir mis experiencias con todos ustedes. ¡Gracias por leerme!.

Estaremos encantados de escuchar lo que piensas

Deje una respuesta

BaulPHP
Logo
Shopping cart