Cómo usar jQuery para generar una ventana emergente modal al hacer clic

Cómo usar jQuery para generar una ventana emergente modal al hacer clic

Una caja modal es una ventana emergente que obliga al usuario a interactuar con ella antes de volver al sitio. Los cuadros modales son útiles para advertencias, cuadros informativos y más. Puedes crear una caja modal con jQuery. Si no estás familiarizado con jQuery, echa un vistazo a nuestro artículo de fundamentos de jQuery para una explicación de cómo funciona jQuery.

Este es un despliegue de código interactivo que le muestra el HTML, CSS, jQuery, y una demostración de la salida.

Modal HTML

Para crear una ventana emergente modal, primero necesita establecer la estructura HTML.

Necesitas crear clases para la superposición de la ventana emergente y el contenido de la ventana emergente para que puedas editarlos por separado del resto del documento.

Este ejemplo crea las clases «popup-overlay» y «popup-content» para permitir que CSS lo estilice específicamente.

Observa los elementos de botón en este ejemplo. Hemos añadido los botones que queremos que activen la ventana emergente. A un botón se le ha dado la clase «abrir», mientras que el otro tiene la clase «cerrar». Estos se utilizarán más tarde para abrir y cerrar la ventana emergente.

Modal CSS

En el CSS, debes estilizar las clases «popup-overlay» y «popup-content» para que estén inicialmente ocultas. Una ventana emergente no sería una ventana emergente si fuera visible desde el principio. Podemos ocultar la ventana emergente cambiando la visibilidad de las clases:

.popup-overlay {visibility:hidden;}.popup-content {visibility:hidden;}

Ahora, no queremos que la ventana emergente esté oculta para siempre, así que tenemos que hacer un caso de uso especial en el CSS para cuando la ventana emergente debe mostrarse. Vamos a utilizar jQuery para ayudar a determinar cuando el pop-up debe ser visible.

jQuery tiene la capacidad de añadir y eliminar clases basadas en acciones (como hacer clic). Por lo tanto, si programamos el jQuery para añadir una clase llamada «activo» cuando se hace clic en el botón «abrir», podemos utilizar la clase «activo» en CSS para mostrar la ventana emergente. Anexa la clase «active» a las clases de la ventana emergente y crea un nuevo estilo para cuando la ventana emergente sea visible.

Mira el ejemplo de abajo para ver cómo debería ser este estilo CSS:

.popup-overlay.active{visibility:visible;}.popup-content.active {visibility:visible;}

Modal jQuery

Ahora es el momento de añadir el jQuery. Asegúrese de configurar su documento HTML para jQuery antes de añadir cualquier código jQuery. Si no está seguro de cómo hacerlo, consulte nuestro artículo Cómo preparar su HTML para jQuery.

Así que cuando se hace clic en los botones HTML «Abrir» y «Cerrar», jQuery necesita añadir o eliminar la clase «active».

Esta primera declaración añade la clase «active» cuando se hace clic en el botón «Open».

$(".open").on("click", function(){$(".popup, .popup-content").addClass("active");});

Cuando esto sucede, la clase «active» se anexa a las clases del pop-up, cambiando así la visibilidad del pop-up a «visible». En otras palabras, la ventana emergente aparecerá.

Esta segunda declaración elimina la clase «active» cuando se hace clic en el botón «Close».

$(".close, .popup").on("click", function(){$(".popup, .popup-content").removeClass("active");});

Cuando esto sucede, la clase «active» se elimina de las clases de la ventana emergente, haciendo que vuelvan a su estilo anterior que tiene la visibilidad establecida en oculto.

Añade ambas declaraciones de jQuery a tu documento. Si todo esto se completa correctamente, tendrá un cuadro emergente modal rudimentario.