¿Cómo funciona el elemento dialog nativo?

Question

Accepted Answer

`<dialog>` es el elemento nativo para **modales y diálogos**. Maneja el atrapamiento de foco, el fondo, la capa superior y el cierre con Escape — características que de otro modo tendrías que construir manualmente con mucho JavaScript y ARIA.

```html
<dialog id="myModal">
  <form method="dialog">           
    <h2>Confirm</h2>
    <p>Are you sure?</p>
    <button value="cancel">Cancel</button>
    <button value="ok">OK</button>
  </form>
</dialog>
```

## Abrir y cerrar en JS

```js
const modal = document.getElementById("myModal");

modal.showModal(); // opens as a MODAL: backdrop + focus trapped + Esc closes
modal.show();      // opens as a NON-modal (no backdrop, page stays interactive)
modal.close("ok"); // closes, sets returnValue

modal.addEventListener("close", () => {
  console.log(modal.returnValue); // "ok" or "cancel" — from the button's value
});
```

## Lo que obtienes gratis con showModal()

- **Atrapamiento de foco** — Tab permanece dentro del diálogo mientras está abierto.
- **Fondo** — estilizable mediante `::backdrop`, y hacer clic fuera es detectable.
- **Capa superior** — se renderiza por encima de todo sin importar el `z-index`.
- **La tecla Escape** lo cierra.
- **`method="dialog"`** en un formulario cierra el diálogo y registra qué botón fue enviado.

## Estilizando el fondo

```css
dialog::backdrop { background: rgba(0, 0, 0, 0.5); }
dialog { border: none; border-radius: 8px; padding: 2rem; }
```

## Por qué es importante

Antes de `<dialog>`, los modales accesibles requerían gestión manual del foco, roles ARIA, bloqueo de desplazamiento y manejo de Escape — una fuente notoria de errores.

El elemento nativo te proporciona todo eso correctamente listo para usar.

Usa `showModal()` para verdaderos modales; es el estándar moderno y accesible para diálogos.