Web ResponsiveComponents
Modals

Modals

Los modals son ventanas que se abren sobre el contenido y no permiten al usuario cambiar el foco a otra tarea hasta que toma una decisión sobre ella. Solo debes usar una modal cuando necesites que el usuario actúe de manera inmediata o realice una acción sin la cuál no es posible continuar. Un buen ejemplo sería cuando una acción requiere que el usuario se autentique, o cuando quieras crear una micro tarea dentro de una página, como compartir parte del contenido.

Normas básicas

Las modals se muestran siempre en el centro de la ventana del browser. Para no hacer perder contexto al usuario y a la vez separar la modal del fondo, debes usar siempre un overlay negro con una opacidad al 60%.

Puedes combinar componentes para crear el contenido de la modal en base a tus necesidades. Usa text areas, imágenes, botones ... pero recuerda que en todos los casos debes usar un header que contenga un título descriptivo y un icono en forma de aspa para cerrarla.

Cuando decidas usar una modal es muy importante que seas conciso y procures que todo el contenido aparezca en pantalla sin necesidad de hacer scroll. De todos modos en el caso que el contenido desborde la ventana, se mostrará una barra de scroll lateral en el interior de la modal.

La modal siempre debe ir centrada y debes usar un overlay negro con opacidad sobre el fondo.
En la versión para smartphones la modal debe usar todo el ancho y alto de la pantalla.

Tipos de modals

Hay tres tipos básicos de modal que se clasifican según el contenido: modal de formulario, modal de imagen y modal de texto. Úsalas como base para crear tus propias modals y añade o elimina elementos para ajustarlas mejor a tus necesidades. Tan solo debes recordar que has de mantener algunas características, como header y color de fondo, y tratar de ser conciso con el contenido.

  • Modal de formulario.
  • Modal de imagen.
  • Modal de texto.