Dialog Element

Définition

Élément natif <dialog> qui gère les modales avec piège de focus, fermeture Échap et arrière-plan intégrés. showModal() crée une modale accessible sans bibliothèque. Baseline « Widely available » depuis mars 2022 ; l'attribut closedby (any, closerequest, none) est plus récent.

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" closedby="any">
  <h2>Confirmation</h2>
  <form method="dialog">
    <button value="ok">OK</button>
  </form>
</dialog>
<button commandfor="dlg" command="show-modal">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 liés

Sources

• developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API
• developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog