04 Capítulo 4 · Lección 8

Modales y overlays

Redactado por
Author Sebastian V.
Fecha de publicación

15/07/2025

Tiempo de lectura

7 min

Tema

Interactions

¿Qué son los Modales y Overlays?

Un modal (o caja de diálogo) es una ventana secundaria que se sobrepone al contenido principal para requerir la atención inmediata del usuario. Un overlay es la capa semi-transparente que se coloca detrás del modal para oscurecer y bloquear la interfaz base, desenfocando al usuario del fondo.

¿Para qué sirven?

Son el componente más agresivo de la UI moderna, por lo que su propósito es interrumpir. Se utilizan para flujos críticos que no deben ignorarse o para configuraciones rápidas que no ameritan cargar una página completa.

  • Prevenir errores críticos: Pedir confirmación (¿Seguro que deseas borrar este proyecto?).
  • Concentración total: Mostrar un formulario complejo sin distracciones periféricas.
  • Mantener el contexto: El usuario no abandona la página actual; simplemente abre un paréntesis, lo resuelve y vuelve exactamente donde estaba.

¿Cómo se usan?

Aparecer instantáneamente genera "ceguera de interfaz" (interrupción brusca). Una entrada animada guía el ojo hacia el centro y avisa al cerebro que el contexto ha cambiado suavemente. Usualmente se aplica opacity: 0 y visibility: hidden al overlay y se usa un transition-delay en la caja del modal para que aparezca una fracción de segundo después de que el fondo se ha oscurecido.

Consejo profesional

Anima siempre el fondo (overlay) con opacidad para oscurecer la pantalla, y el modal en sí usando transform: scale o transform: translateY. Evita animar propiedades de layout como width/height.

Modal suave y natural

> _ 
<button class="open-modal-btn"
  style="border-radius:0; font-family:'afronaut',serif; background:#9FA6FF; color:hsla(158,23%,18%,1);">
  Abrir Modal
</button>

<div class="overlay" id="demoOverlay">
  <div class="modal-box">
    <h5 style="margin-top:0; margin-bottom:4px; font-weight:700; text-align:center;">Configuración</h5>
    <span style="font-weight:300; font-family:'afronaut',serif; text-align:center; display:block;">
      ¿Seguro que deseas guardar estos cambios?
    </span>
    <div class="modal-actions" style="display:flex; flex-direction:row; justify-content:flex-end; gap:12px; margin-top:24px;">
      <button class="btn-cancel" id="closeBtn"
        style="border-radius:0; background:transparent; border:1px dashed #444; color:#444; font-family:'afronaut',serif;">
        Cancelar
      </button>
      <button class="btn-confirm"
        style="border-radius:0; background:hsla(158,23%,18%,1); color:hsla(160,52%,71%,1); font-family:'afronaut',serif;">
        Guardar
      </button>
    </div>
  </div>
</div>
> _
Configuración
¿Seguro que deseas guardar estos cambios?

Haz clic en el botón para abrir el modal. Haz clic en la zona oscura o cancelar para cerrarlo.

Errores comunes

01
Ignorar la accesibilidad Crear modales impresionantes pero olvidar capturar el foco (Focus Trap). Un usuario con teclado podría tabular por links ocultos.
02
Display: none inmediato En React/Vue, desmontar el modal del DOM antes de dejar que termine la animación de salida de CSS hace que desaparezca bruscamente.

Practica lo aprendido

Implementa un modal completo con overlay animado y caja que aparece con rebote.

01 Crea el .overlay con position: fixed, inset: 0 y opacity: 0.
02 Crea el .modal-box con transform: scale(0.9) translateY(20px).
03 Al añadir .active, el overlay pasa a opacity: 1 y visibility: visible.
04 La .modal-box llega a scale(1) translateY(0) con delay de 50ms.
05 Cierra el modal al hacer clic en el overlay (fuera de la caja).