Estilos de modales y diálogos

El elemento <dialog> de HTML proporciona un comportamiento modal integrado: gestión del foco, cierre con Escape y la API showModal() / close(). Estilícelo con CSS en lugar de crear desde cero la estructura de un modal personalizado.

El pseudoelemento ::backdrop permite aplicar estilos a la superposición situada detrás de un <dialog> abierto. Aplique un fondo semitransparente: dialog::backdrop { background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); }. No necesita un div contenedor.

Centre los dialogs con CSS: dialog { margin: auto; max-width: min(90vw, 640px); max-height: 90vh; overflow-y: auto; }. Usar margin: auto en un dialog lo coloca en el centro de la ventana gráfica sin necesidad de posicionarlo con JS.

Establezca overflow-y: auto en el propio dialog para gestionar el contenido extenso. Establezca overflow: hidden en body cuando se abra el modal para evitar el desplazamiento del fondo; añada y quite una clase con JavaScript para alternar este comportamiento.

Anime la entrada del dialog mediante @starting-style (Chrome 117+) para crear animaciones de entrada solo con CSS, sin JavaScript. Para ofrecer una compatibilidad más amplia, añada una clase open con JavaScript y use transition sobre transform y opacity: slide-up desde translateY(20px) hasta translateY(0).

Animar el cierre de un dialog es complicado: el dialog se oculta inmediatamente al ejecutar close(). Puede usar la API de popover, que admite animaciones de cierre de forma nativa, o interceptar el cierre con JavaScript, reproducir la clase de animación de salida y llamar a close() cuando termine la animación.

Los dialogs se abren por encima de todo el contenido de la página. Evite las guerras de z-index utilizando el contexto de apilamiento nativo del elemento dialog: se muestra en la top layer, por encima de todos los valores de z-index de CSS, sin necesidad de establecer z-index en el propio dialog.

En móviles, deslice los dialogs desde la parte inferior como una hoja: dialog { margin: auto auto 0; width: 100%; border-radius: 16px 16px 0 0; max-height: 90vh; }. En escritorio, céntrelos como un modal tradicional usando el patrón margin: auto.

El elemento dialog nativo mueve automáticamente el foco al primer elemento enfocable de su interior al abrirse. Asegúrese de que el orden de tabulación dentro del dialog sea lógico. Añada un botón de cierre que devuelva el foco al elemento que activó el dialog cuando este se cierre, para mantener un flujo de navegación correcto con el teclado.

Añada aria-labelledby apuntando al título del dialog y aria-describedby apuntando a su descripción. El rol del dialog es implícito en <dialog>. Los lectores de pantalla anuncian estas etiquetas cuando el foco entra en el dialog.

Los dialogs de confirmación necesitan: un título con una pregunta clara, una breve descripción del impacto, un botón de acción destructiva (rojo y alineado a la derecha) y un botón de cancelación (alineado a la izquierda o secundario). Use autofocus en el botón de cancelación para que la opción segura sea la interacción de teclado predeterminada.

El elemento dialog nativo, junto con ::backdrop, el centrado mediante margin: auto, el control del overflow, las animaciones CSS de entrada y la gestión del foco, proporciona un patrón de modal totalmente accesible y controlado por CSS. Los diseños adaptables en forma de hoja para móviles y los atributos ARIA adecuados completan un componente dialog listo para producción.