Construye modales y capas flotantes accesibles con APIs nativas, sin dependencias innecesarias.
dialog y popover resuelven patrones comunes de UI con soporte nativo.
dialog cubre confirmaciones, formularios y flujos modales con foco controlado.
popover encaja en menús contextuales, ayudas y paneles ligeros.
Usarlos bien mejora accesibilidad y reduce JS artesanal.
No son intercambiables: cada uno tiene su papel. 🧠
Usa `form method="dialog"` para cerrar sin lógica extra.
Ideal para menús rápidos y paneles de ayuda.
Construye modales y capas flotantes accesibles con APIs nativas, sin dependencias innecesarias.
Código del tema: <dialog> | showModal() | popover | popovertarget
No son intercambiables: cada uno tiene su papel. 🧠
Interacción principal que requiere atención completa.
Contenido auxiliar contextual y de corta duración.
Usa `form method="dialog"` para cerrar sin lógica extra.
<button onclick="document.getElementById('confirmar').showModal()">Eliminar</button>
<dialog id="confirmar" aria-labelledby="titulo-confirmar">
<h2 id="titulo-confirmar">Confirmar eliminación</h2>
<p>Esta acción no se puede deshacer.</p>
<form method="dialog">
<button value="cancel">Cancelar</button>
<button value="ok">Sí, eliminar</button>
</form>
</dialog>Ideal para menús rápidos y paneles de ayuda.
<button popovertarget="menu-usuario">Abrir menú</button>
<div id="menu-usuario" popover>
<a href="/perfil">Perfil</a>
<a href="/configuracion">Configuración</a>
</div>