Abrir modal Bootstrap con jQuery

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");

Me fascina la programación en diversos lenguajes y mas aún si son sistemas web o páginas web.

Entradas relacionadas

Detectar Checkbox Marcados JavaScript

Detectar Checkbox Marcados JavaScript y jQuery

Detectar Checkbox Marcados JavaScript. Este es un tutorial realizaremos un script sobre cómo detectar cada vez que una casilla de verificación ha sido marcada o desmarcada por…

Validar Checkbox PHP, JavaScript y jQuery

Validar Checkbox PHP, JavaScript y jQuery: Ejemplos

Validar Checkbox PHP, JavaScript y jQuery. Cuando estemos programando un sistema y/o página web siempre nos encontraremos con formularios y por ende con validaciones en algún campo….

Desactivar vínculos jQuery y CSS Ejemplos Completos

Desactivar vínculos jQuery y CSS: Ejemplos Completos

Desactivar vínculos jQuery y CSS: Ejemplos Completos. En este Post aprenderemos a desactivar o deshabilitar (links, vínculos, enlaces) usando CSS y el lenguaje jQuery. Por lo tanto,…

Redireccionar página web con jQuery

Redireccionar página web con jQuery: Ejemplo completo

Redireccionar página web con jQuery. En este artículo veremos cómo re direccionar de una página a otra página diferente usando el lenguaje jQuery. Sin embargo, si observamos…

Cómo redirigir con jQuery a otra pagina

Cómo redirigir con jQuery a otra pagina

Cómo redirigir con jQuery a otra pagina. Se puede redirigir a otra página web utilizando JQuery, la respuesta es un sí, n nuestras páginas web ya sean…

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *