Abrir modal Bootstrap con jQuery. En este tutorial vamos a ver cómo activar una ventana modal con jQuery que se muestre en forma de ventana flotante al cargar la web. Por lo tanto, iremos directo al ejemplo.
¿Qué es una ventana modal BootStrap?
Una ventana modal, es una ventana de diálogo que se muestra en pantalla por encima del resto de los contenidos. Sin embargo, las ventanas modales bloquean el acceso al resto de los contenidos de la página hasta que se interactúa con ellas de algún modo.
Su uso reemplaza los mensajes de alerta alert() de cualquier navegador, de forma que se obtenga una ventana más profesional y personalizable usando el framework BootStrap.
¿Que se requiere para que una ventana modal funcione?
Se requiere que se incluya el framework BootStrap y la librería jQuery en tu proyecto y luego sigue los pasos que ves a continuación. Veamos un ejemplo.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>Una vez integrado los componentes del framework BootStrap y la librería jQuery ya podemos disfrutar de las ventanas modales.
¿Se puede abrir una ventana modal sin presionar un botón?
Si, aprenderemos a activar un modal de BootStrap desde un script con jQuery sin tener que crear un enlace o un botón.
Ejemplos
Veamos primero el código de un modal de BootStrap que se abre mediante un botón. Sin embargo, esta ejecución es muy básico y genérico.
Recordemos que el siguiente botón posee atributos que hacen visualizar una ventana modal
<!-- Enlace para abrir el modal -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#miModal">Abrir Modal</button>Etiquetas y atributos básicos de una ventana modal
<!-- Modal -->
<div id="miModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Contenido del modal -->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>Texto del modal</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" data-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>Mostrar ventana modal sin presionar un botón o enlace HTML5
Si lo que queremos es activar el modal sin utilizar el enlace podemos hacerlo con jQuery accediendo al propio modal por su id y ejecutando la función modal() de esta forma.
<script type='text/javascript'>
$(document).ready(function() {
$("#miModal").modal("show");
});
</script>Explicación del código anterior
a) Para que la iniciación y ejecución de una ventana modal se requiere que jQuery este declarado en nuestro proyecto
b) Declarar una línea de código que se ejecutara al cargar la página o proyecto. $(document).ready(function()
c) Llamar al ID y abrir el modal $("#miModal").modal("show");
