DanteCervantes.com

Cómo hacer una ventana modal con Javascript

Publicado por : Dante | 28 febrero, 2016 | 2:26 pm

 

Seguimos con los tutoriales sobre Javascript, esta vez veremos como crear una ventana modal capaz de visualizar imágenes y videos embebidos de youtube.

Nuestro plugin lo llamaremos “Fancy Overlay” (fo)

VER DEMO

Primero debemos crear un documento index.html en el editor de tu preferencia, con la siguiente estructura.

Estilos

El plugin detectará las imágenes por defecto, los videos por medio de la url (solo soporta Youtube).

El identificador “fancy-overlay” es obligatorio, ya que con este, el plugin detectará su contenido y armará una galería de manera dinámica con su contenido.

Crearemos un archivo llamado main.js. con el siguiente contenido

Explicación de cada función

  • init() : Es la encargada de inicializar nuestro plugin, el cual busca el contenedor con el identificador “fancy-overlay” obtiene los enlaces y arma un arreglo con las opciones el cual será utilizado de manera global por otras funciones
  • getYTThumbnail() : Se encarga de obtener un “thumbnail” o imagen del video de Youtube
  • getExtension() : Como su nombre lo dice, se encarga de obtener la extensión del archivo de la url que se utilizo en los contenedores de “fancy-overlay” para determinar si es un video o una imagen
  • transformYTURL() : Convierte una url normal de youtube como esta “https://www.youtube.com/watch?v=Yt_myLDSdsY” en “https://www.youtube.com/embed/Yt_myLDSdsY”
  • viewPhoto() : Es la que se encarga de crear una ventana modal, dependiendo su contenido, si es un video crea un iframe con la url convertida, en caso contrario crea un divisor con la url de la imagen

Conclusión

En este tutorial hemos aprendido como crear una ventana modal con Javascript puro, sin necesidad de utilizar plugins o librerías adicionales como jQuery.

VER DEMO

¡Actualización!

El amigo Ivan Villamil, ha creado un plugin para obtener un efecto estilo Pinterest, he aquí el plugin, ambos, hemos mezclado los plugins y hemos logrado un efecto extraordinario ve aquí el efecto!

Recibe los mejores desarrollos y tutoriales

* campos requeridos

redes sociales