Modales y alertas

Estos componentes comunican algo importante al usuario: una confirmación, un error, un aviso legal o una pista. Bien hechos ayudan; mal hechos molestan. Aquí tienes versiones accesibles de cada uno.

Modal (ventana de diálogo)

Cuándo usarlo: confirmar acciones destructivas ("¿Eliminar?"), formularios cortos que no merecen una página propia o mostrar detalles sin salir de la vista actual.

Modal con dialog

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo personalizarlo

• Usa el elemento nativo <dialog> con showModal(): el navegador ya atrapa el foco, cierra con Esc y pone el modal por encima de todo.
• --velo es el color del fondo oscuro (::backdrop); --radio el redondeo de la caja.
• Dentro de un <form method="dialog">, cada botón cierra el modal y deja su value en modal.returnValue: así sabes si el usuario confirmó o canceló.
• El clic fuera de la caja se detecta comparando e.target === modal.

Buena práctica

Enlaza el título y la descripción con aria-labelledby y aria-describedby para que el lector de pantalla los lea al abrir.

Notificaciones toast

Cuándo usarlo: mensajes breves que confirman una acción sin interrumpir ("Guardado", "Copiado al portapapeles", "Error de conexión").

Toasts

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo personalizarlo

• Colores por tipo: --exito, --error, --info, --aviso. Tiempo visible: --duracion.
• Para cambiar la posición, modifica .toasts (por ejemplo top: auto; bottom: 16px; y align-items: center para abajo al centro).
• Llama a mostrarToast('exito') desde cualquier parte de tu código. Agrega tipos nuevos en el objeto DATOS.
• La barra inferior marca el tiempo restante y se pausa al pasar el mouse. El contenedor tiene aria-live="polite" y los errores usan role="alert".

Error común

Poner información importante o botones críticos solo en un toast que desaparece. Si el usuario debe actuar, usa un modal o una alerta fija.

Alertas

Cuándo usarlo: mensajes persistentes dentro de la página: resultado de un formulario, avisos de cuenta, mantenimiento programado.

Alertas

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo personalizarlo

• Cada tipo tiene un color fuerte y uno de fondo (--info / --info-fondo, etc.). Los bordes y el texto se derivan con color-mix().
• Añade la clase solida para una versión con fondo de color intenso.
• Usa role="alert" solo para errores urgentes (interrumpe al lector de pantalla); para el resto, role="status".
• Si no necesitas cerrarlas, elimina el botón .cerrar.

Banner de cookies

Cuándo usarlo: sitios que usan analítica, píxeles de publicidad u otras cookies no esenciales y necesitan el consentimiento del usuario.

Banner de cookies

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo personalizarlo

• --fondo-banner, --texto-banner y --acento controlan los colores.
• La decisión se guarda en localStorage (dentro de try/catch) y el banner no vuelve a salir.
• Carga tus scripts de analítica solo cuando la decisión sea "aceptadas", dentro del manejador del botón y en iniciar().
• El botón "Reiniciar demo" es solo para probar: quítalo en producción.

Legal

Dale a "Rechazar" la misma visibilidad que a "Aceptar". Muchas leyes de privacidad consideran inválido el consentimiento si rechazar es más difícil.

Tooltips

Cuándo usarlo: pistas cortas sobre botones de solo icono o explicaciones breves junto a un campo ("¿Qué es esto?").

Tooltips

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo personalizarlo

• Posición: añade al contenedor .tip la clase arriba, abajo, izquierda o derecha.
• --tip-fondo y --tip-texto son los colores; --separacion la distancia al botón.
• Aparece con hover y con foco del teclado (:focus-within), y se oculta con Esc.
• El botón apunta al tooltip con aria-describedby, así su texto se lee como descripción.

Buena práctica

No pongas información esencial solo en un tooltip: en pantallas táctiles no existe el hover. Úsalo como complemento.

Resumen

• <dialog> + showModal() te da un modal accesible casi gratis.
• Toasts para confirmaciones breves; alertas para mensajes que deben permanecer.
• aria-live, role="status" y role="alert" hacen que los avisos se anuncien.
• Guarda decisiones como el consentimiento de cookies con localStorage protegido por try/catch.