toggle

Leaf Lightbox, ventana modal responsive sin javascript

min Leaf Lightbox
Demostración Descargar Repositorio

—Versión actual 1.00

Leaf Lightbox es una ventana modal desarrollado utilizando únicamente css puro. Soporta videos (por el momento solo probado con vimeo y youtube), imágenes y bloques de textos. Es compatible con todos los navegadores actuales y la mayoría de los antiguos, aunque algunos efectos visuales podrían no funcionar correctamente si este último no da soporte a keyframes & animation de css3.


Instalación

Después de descargar el archivo que se encuentra adjunto en esta entrada, incluir arriba de </head> el código css:


<link rel="stylesheet" href="leafbox.min.css"/>
<link rel="stylesheet" href="dist/theme/default.css"/>

En el html hay que crear un contenedor, que puede ser section, header, figure, div, etc. Realmente no importa mucho que etiqueta sea con tal de que puedas crear un bloque. Al contenedor hay que agregarle la class lbox [efecto], reemplazando [efecto] por uno de los preestablecidos: fade, bounce, flip. Para una imagen quedaría de la siguiente forma:


<figure id="img" class="lbox flip">
   <img src="img/img-03.jpg"/>
   <a href="#_"></a>
</figure>

Para un video:


<div id="vid" class="lbox flip">
   <div class="vid">
      <!--player-->
   </div>
   <a href="#_"></a>
</div>

Para un bloque te texto:


<div id="text" class="lbox flip">
   <div class="text">
      <!--texto-->
   </div>
   <a href="#_"></a>
</div>

Por último, solo falta crear un enlace que apunte al identificador del contenedor (es muy importante que cada identificador sea único, no puede repetirse).


<a href="#img">Abrir ventana flotante</a>

Limitaciones

Cada contenedor sólo puede incluir un elemento, ya sea una imagen, un video o un bloque de texto, no puedes incluir un conjunto de imagenes o de videos.