Dialog Element

Definition

Élément natif <dialog> qui gère les modales avec piège de focus, fermeture Escape et backdrop intégrés. La méthode showModal() crée une modale accessible sans bibliothèque externe.

Analogie

Comme une fenêtre de guichet : elle capte toute l'attention, bloque l'accès au reste, et se ferme proprement.

Exemple de code

<dialog id="dlg">
  <h2>Confirmation</h2>
  <form method="dialog">
    <button value="ok">OK</button>
  </form>
</dialog>
<button onclick="dlg.showModal()">Ouvrir</button>

Cas d'usage

Remplacer les modales custom par l'élément natif pour une accessibilité et une gestion du focus automatiques.

Anti-pattern

Termes lies