Modal

Para realizar modales, 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).

Abrir modal

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.
• w75: para que ocupe el 75% del ancho disponible.
• centered-block: centrado en el documento.
• my2: aumentar el espacio vertical con otros elementos.

Las figuras dentro de la galería tienen las clases:

• small: tamaño pequeño.
• card: forma de tarjeta

Las imágenes tienen la clase with-modal.

Ejemplo

Código del ejemplo