Modales
Un modal es un cuadro de diálogo posicionado en una capa sobre el resto de elementos de la página. Se usa CSS para controlar su apariencia y comportamiento.
Índice
Modales
Para realizar modales con FastLight, tan solo hay que añadir
la clase modal a un contenedor.
La estructura del modal es:
- Contenedor externo con clase
modal(el de fondo semitransparente). - Contenedor o elemento interno (contenido del modal).
Ejemplo interactivo
En este ejemplo hay un modal que está oculto (tiene clase hidden).
Al pulsar el botón se mostrará (se le quita la clase hidden)
y al hacerle clic encima se cerrará de nuevo (se le vuelve a poner la clase hidden).
Código del ejemplo
Formulario en modal
De la misma forma que tenemos una figura en un modal, podemos tener un formulario.
Ejemplo interactivo
Este ejemplo sigue el mismo patrón de antes. Pulsa el botón para ver el modal.
Código del ejemplo
Auto modales
FastLight automatiza la creación de modales, de momento solamente funciona con imágenes, pero en el futuro se implementarán más opciones.
Para usarlo, tan solo tenemos que incluir el fichero con
<script src="/js/Modal.js"> y añadir la clase
with-modal a las imágenes que queramos que se amplien con
un modal.
Los elementos de clase with-modal muestran el cursor tipo "zoom-in"
al pasar el ratón por encima, con lo que el usuario intuirá que se puede hacer clic
para ampliar.
Se puede añadir una leyenda a la imagen del modal indicando la propiedad
data-caption en la imagen. La leyenda se colocará en la parte
inferior de la imagen ampliada.
Podemos añadir también un par de líneas de texto adicional,
usando la propiedad data-description de HTML en la imagen, que
creará un párrafo dentro del modal.
Ejemplo
Código del ejemplo
Ejemplo de galería con auto-modales
En este ejemplo se muestra cómo hacer una galería con modales automáticos. Se han usado las siguientes clases:
gallery: le da el aspecto y aplica el flex.w100: para que ocupe el 100% del ancho disponible.my2: aumentar el espacio vertical con otros elementos.
Las imágenes tienen las clases:
with-modal: para los modales.landscape: relación de aspecto 4/3.fit: ajuste automático para que todas las imágenes tengan el mismo tamaño.
Ejemplo
Código del ejemplo
Más ejemplos
Podéis consultar más ejemplos útiles relacionados: