Creando Modales de Imágenes, de forma automatizada con JavaScript

Un sencillo Script para crear modales de imágenes de forma automatizada usando JavaScript y CSS3.

Los requisitos para hacer funcionar el script son hacer uso de HTML5, CSS3 y JavaScript. Tienes que incluir o hacer uso de los siguientes códigos:

  • Añadir el fichero js/modalImages.js a tu página.
  • Añadir los estilos incluidos en el fichero css/style.css
  • Incluir la clase «modalImg» a las imágenes que deseas abrir en modal.

Un ejemplo de funcionamiento lo puedes ver siguiente este enlace.

Incluye el código HTML con tus Imágenes

En tu página tan sólo tienes que incluir a tus elementos <img> el atributo class=»modalImg»

Incluye los Estilos de las imágenes y la Capa Modal

Añade o personaliza los estilos CSS para que se adapten a tu página web.

Incluye el código JavaScript

El script es sencillo y funcional y los procesos que he creado son los siguientes:

  • He creado un evento «load» que al cargarse la página creará una capa modal padre y todos sus  elementos hijos. Para este proceso hacemos uso del método createElement(). A su vez creo sus atributos usando el método setAttribute(). Esto es  para no tener que incluir el código HTML con la ventana modal a las páginas, por lo que automatizamos esta tarea.
  • A continuación buscamos en la página todas aquellas imágenes que coincidan con la clase «modalImg» haciendo uso del método querySelectorAll(). Recorremos con un loop los resultados de los elementos <img> y le incluimos un evento de click a todos ellos haciendo uso del método addEventListener().
  • Por último también creamos un evento «click» para poder cerrar el modal activo.

 

Deja una respuesta

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.