CSS sólo responsive modal ventana-luz modal
| Autor: | hunzaboy |
|---|---|
| Views Total: | 2,359 |
| Sitio oficial: | Ir a la web |
| Actualizado: | October 11, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Light modal es una biblioteca de CSS ligera (2Kb minificada) para crear ventanas modales animadas, personalizables y con un diseño CSS3 sin dependencia.
Funcionamiento
Incluya la versión minimizada del Light modal en el de cabecera del documento.
<link rel="stylesheet" href="dist/css/light-modal.css">
Incluye < a href = "https://daneden.github.io/animate.css/" target = "_ blank" rel = "noopener noreferrer" > Animate. CSS para animaciones CSS3 más sofisticadas cuando se abre y se cierra la ventana modal.
<link rel="stylesheet" href="/path/to/animate.min.css">
Cree el contenido modal de la siguiente manera:
<div class="light-modal" id="demo-modal" role="dialog" aria-labelledby="light-modal-label" aria-hidden="true"> <div class="light-modal-content animated zoomInUp"> <img src="demo.jpg" alt="from unsplash"> <a href="#" class="light-modal-close-icon" aria-label="close">×</a> <div class="light-modal-caption"> Lightbox Caption Here </div> </div> </div>
Cree un vínculo para alternar la ventana modal.
<a href="#demo-modal">Open Modal</a>
Cambiar las animaciones de apertura/cierre predeterminadas por overring las clases CSS en el contenido modal.
<div class="light-modal-content animated zoomInUp"> ... Modal Content Here </div>
Registro de cambios
10/11/2018
- Se agregó el modo Galería
