English

<dialog>

Ouvrir une fenêtre modale, avec un piège de focus intégré

— 1 min de lecture

  • HTML
  • accessibilité
  • sémantique
  • interactions

<dialog> — La fenêtre modale

La balise <dialog> représente une boîte de dialogue. Ouverte avec showModal(), elle piège le focus à l'intérieur et désactive le reste de la page. L'attribut open rend le dialogue non modal.

Quand l'utiliser

Tu veux afficher une confirmation, un formulaire de connexion, un message d'alerte ou toute interaction qui demande l'attention exclusive de l'utilisateur avant de continuer.

Ce que tu gagnes

Accessibilité : le piège de focus, le backdrop, la fermeture par Echap et le retour du focus sont natifs. Pas besoin de réinventer tout ça avec ARIA.

Exemple de code

<dialog id="confirm">
  <h2>Delete this item?</h2>
  <p>This action cannot be undone.</p>
  <form method="dialog">
    <button value="cancel">Cancel</button>
    <button value="confirm">Delete</button>
  </form>
</dialog>
 
<button type="button" onclick="confirm.showModal()">
  Delete item
</button>

Pour aller plus loin