Comment fonctionne l'élément natif dialog ?

Question

Accepted Answer

`<dialog>` est l'élément natif pour les **modales et dialogues**. Il gère le piégeage du focus, le fond, la couche supérieure et Échap-pour-fermer — des fonctionnalités que vous devriez autrement construire à la main avec beaucoup de JavaScript et 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>
```

## Ouverture et fermeture 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
});
```

## Ce que vous obtenez gratuitement avec showModal()

- **Piégeage du focus** — Tab reste à l'intérieur du dialogue pendant qu'il est ouvert.
- **Fond** — stylable via `::backdrop`, et le clic en dehors est détectable.
- **Couche supérieure** — s'affiche au-dessus de tout indépendamment de `z-index`.
- **La touche Échap** le ferme.
- **`method="dialog"`** sur un formulaire ferme le dialogue et enregistre quel bouton a soumis.

## Styliser le fond

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

## Pourquoi c'est important

Avant `<dialog>`, les modales accessibles nécessitaient une gestion manuelle du focus, des rôles ARIA, un verrouillage du défilement et une gestion d'Échap — une source notoire de bugs.

L'élément natif vous donne tout cela correctement prêt à l'emploi.

Utilisez `showModal()` pour les véritables modales ; c'est la valeur par défaut moderne et accessible pour les dialogues.