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
staticpara que aparezca pero no se cierre al hacer click. - keyboard: Es booleano para establecer si se cierra el modal al presionar la tecla Esc.
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.
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.
