Come funziona l'elemento dialog nativo?

Question

Accepted Answer

`<dialog>` è l'elemento nativo per **modal e dialog**. Gestisce il focus trapping, lo sfondo, il top layer, e la chiusura con Escape — funzionalità che altrimenti dovresti costruire manualmente con molto JavaScript e 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>
```

## Apertura e chiusura in 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
});
```

## Cosa ottieni gratuitamente con showModal()

- **Focus trapping** — Tab rimane dentro il dialog mentre è aperto.
- **Backdrop** — stilizzabile via `::backdrop`, e il clic all'esterno è rilevabile.
- **Top layer** — si renderizza sopra tutto indipendentemente da `z-index`.
- **Tasto Escape** lo chiude.
- **`method="dialog"`** su un form chiude il dialog e registra quale bottone ha inviato il modulo.

## Stilizzazione dello sfondo

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

## Perché è importante

Prima di `<dialog>`, i modal accessibili richiedevano la gestione manuale del focus, i ruoli ARIA, il blocco dello scorrimento e la gestione dell'Escape — una notoria fonte di bug.

L'elemento nativo ti offre tutto questo correttamente out of the box.

Usa `showModal()` per i veri modal; è il default moderno e accessibile per i dialog.