Abrir ventana modal Bootstrap con jQuery. En este tutorial vamos a ver cómo integrar una ventana modal con el framework y la librería jQuery que se muestre en forma de popup al pulsar un botón y/o se ejecute al cargar la página.
¿Qué es una ventana modal BootStrap?
Una ventana modal, es un cuadro de diálogo que se utiliza para mostrar información por encima del resto de los contenidos. Sin embargo, las ventanas modales hacen énfasis en la información mostrada y bloquean la visualización al resto de los contenidos de la página hasta que se interactúa de algún modo.
¿Porque se usan las ventanas modales Bootstrap?
Se utilizan a modo de reemplazo de los mensajes de alerta alert() de cualquier navegador, de forma que se obtenga una ventana más homogénea, personalizable y profesional. Por lo tanto, evita la carga de otra ventana.
Abrir ventana modal Bootstrap con jQuery
Antes de comenzar, debemos de incluir jQuery y Bootstrap en tu proyecto y luego sigue los pasos que ves a continuación.
Pasos para integrar ventanas modales
Veamos primero el código de un modal básico de BootStrap que se abre mediante un botón.
a) Botón HTML para abrir MODAL
Al darle clic o presionar este botón automáticamente abrirá la ventana modal BootStrap, proporcionando una pregunta, llenar un formulario y/o mostrar detalles de algún registro. Sin embargo, también suelen utilizar para reproducir videos, mostrar PDF, etc.
<!-- Botón HTML para abrir el modal -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#miModal">Abrir Modal</button>
<!-- Modal -->b) Ventana Modal BootStrap
Esta es una estructura genérica de un modal que por defecto estará oculta y será visible al presionar el botón anterior.
<!-- 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>Activar modal al cargar la pagina
Si lo que queremos es activar el modal sin utilizar el enlace o botón HTML podemos hacerlo con jQuery accediendo al propio modal por su id y ejecutando la función modal() de esta forma
$(document).ready(function(){
$("#miModal").modal("show");
});Declarar librerías y Framework
Si bien se puede crear ventanas modales con CSS, es recomendable usar algún framework especializado para ventanas modales por ser responsiva y optimizado por la mayoría de navegadores.
Por lo tanto, necesitamos los siguiente:
- La librería jQuery
- Framework Bootstrap 4,6
Es importante declarar estos componentes para que nuestro modal funcione correctamente
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<!-- Archivos del framework Bootstrap 4.6-->
<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>Ejemplo completo de abrir modal con jQuery al cargar pagina
A continuación, les dejare el script completo para que puedan usarlo en sus proyectos web
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#miModal").modal("show");
});
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container" style="margin-top:20px; text-align:center">
<!-- Enlace para abrir el modal -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#miModal">Abrir Modal</button>
</div>
<!-- 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>
<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>
</body>
</html>Conclusiones y recomendaciones
Gestionar las ventanas modales es muy recomendado al momento de desarrollar sistemas o páginas web. Por lo tanto, usar un framework o librerías nos ayuda a ahorrar tiempo en la maquetación.
Además, podemos crear ventanas modales dinámicos que vimos en este artículo.
Otras ventanas similares para dar respuestas es las ventanas modales SweetAlert que se usa para mostrar respuestas de una acción con el servidor web.
Ver Demostración
