Lightbox de pantalla completa CSS puro con animaciones CSS3-lightbox. CSS
| Autor: | DizzyZane |
|---|---|
| Views Total: | 3,337 |
| Sitio oficial: | Ir a la web |
| Actualizado: | September 10, 2015 |
| Licencia: | MIT |
Vista prévia
Descripción
Una solución CSS pura para crear ventanas emergentes adaptables, animadas, de pantalla completa lightbox/modal con animaciones CSS3. Funciona en la mayoría de los navegadores web modernos que soportan propiedades CSS3.
¿Cómo funciona?
Cargue la hoja de estilos lightbox. CSS requerida en la sección head del documento.
<link rel="stylesheet" href="lightbox.css">
Agregue el atributo ' lightbox ' al contenedor modal. El ID único ' lightbox-r ' significa deslizarse hacia fuera desde el lado derecho de la pantalla.
- lightbox-r: de derecha a izquierda
- lightbox-l: de izquierda a derecha
- lightbox-b: de abajo hacia arriba
- lightbox-t: de arriba a abajo
- lightbox-INST: no Animation
<div id="lightbox1-r" lightbox> <a href="#screenarea"></a> ... modal content here ... </div>
Crea un enlace para alternar el lightbox.
<a href="#lightbox-r">Click me</a>
Cambiar la velocidad de la animación:
- Normal (lightbox = "NORM" [predeterminado])
- Corregido (lightbox = "Fixed")
- Lento (lightbox = "slow")
- Instantáneo (lightbox = "Setup")
