Ventana Modal responsive sin javascript
Después de descargar el archivo que se encuentra adjunto en esta entrada, incluir arriba de
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:
Para un video:
Para un video:
<div id="vid" class="lbox flip">
<div class="vid">
</div>
<a href="#_"></a>
</div>
Para un bloque te texto:
<div id="text" class="lbox flip">
<div class="text">
</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 vídeo o un bloque de texto, no puedes incluir un conjunto de imágenes o de vídeos.
No se permiten nuevos comentarios