Diseño · Guía práctica
Un diálogo visible con open no se convierte por ello en una ventana modal
Mostrar una caja y bloquear la interacción con el resto de la página son comportamientos diferentes.
MDN distingue los diálogos HTML no modales de los abiertos mediante showModal(). El atributo open hace visible un dialog no modal; no reproduce por sí solo el comportamiento de un diálogo modal. La presencia de una caja sobre la página no basta para determinar cómo puede interactuarse con el fondo.
Ejemplo propio de diseño: una ficha muestra una explicación sobre los tipos de entrada, pero debe permitir consultar la agenda que queda detrás. Esa intención es diferente de un paso que exige resolver una elección antes de seguir. Antes de elegir la implementación, escribe si el usuario debe poder actuar sobre el resto del documento.
La documentación explica que showModal() vuelve inertes los elementos del mismo documento ajenos al diálogo y sus descendientes. También describe diferencias de cierre y exposición accesible. No se debe atribuir ese efecto únicamente a una sombra de fondo o a la posición visual del panel.
Una revisión de diseño puede separar propósito, método de apertura, foco y mecanismo de cierre. Si una maqueta solo dibuja la caja, faltan las decisiones de interacción. Esta publicación no ha ensayado lectores de pantalla ni todas las combinaciones de navegador: el caso propone qué comportamiento documentar para una prueba posterior.
El elemento details resuelve otro patrón, desplegar contenido bajo un resumen. Dialog introduce una interacción diferenciada. Elegir entre ambos por apariencia puede ocultar la necesidad real del lector; conviene conservar el propósito antes de añadir código que cierre, abra o bloquee partes de una página.
Comprobación práctica
- Define si el fondo sigue activo
- Identifica el método de apertura
- Planifica foco y cierre
- Comprueba el propósito del diálogo