<dialog>

Description

L’élément <dialog> crée une boîte de dialogue native. Affiché en mode modal via showModal(), il piège le focus dans la boîte, bloque les interactions avec le reste de la page et est fermable avec la touche Echap. En mode non-modal via show(), il est affiché sans bloquer le reste. C’est la solution native recommandée pour les modales.

Syntaxe

<dialog id="ma-modale">
  <p>Contenu de la boîte de dialogue.</p>
  <button type="button" id="fermer">Fermer</button>
</dialog>

Exemples

Modale avec JavaScript :

<button type="button" id="ouvrir">Ouvrir la modale</button>

<dialog id="modale" aria-labelledby="modale-titre">
  <h2 id="modale-titre">Confirmation</h2>
  <p>Voulez-vous vraiment supprimer cet élément ?</p>
  <div>
    <button type="button" id="confirmer">Confirmer</button>
    <button type="button" id="annuler">Annuler</button>
  </div>
</dialog>

<script>
  const modale = document.getElementById('modale');
  document.getElementById('ouvrir').addEventListener('click', () => modale.showModal());
  document.getElementById('annuler').addEventListener('click', () => modale.close());
</script>

Fermeture via formulaire (natif) :

<dialog id="confirmation">
  <form method="dialog">
    <p>Êtes-vous sûr ?</p>
    <button type="submit" value="oui">Oui</button>
    <button type="submit" value="non">Non</button>
  </form>
</dialog>

Attributs spécifiques

Attribut	Type	Description
open	boolean	Affiche la boîte de dialogue (non-modal). Préférer show() ou showModal() via JavaScript.

Notes

.showModal() vs .show() :

• showModal() : modal — piège le focus, bloque le fond, crée un pseudo-élément ::backdrop, fermable avec Echap.
• show() : non-modal — affichage simple sans blocage ni focus piégé.

<form method="dialog"> : un formulaire avec method="dialog" ferme la modale à la soumission. La valeur du bouton soumis est accessible via dialog.returnValue.

Accessibilité : <dialog> a nativement role="dialog". Toujours ajouter aria-labelledby pointant vers le titre de la modale.