HTMLDialogElement : méthode showModal()

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis mars 2022.

La méthode showModal() de l'interface HTMLDialogElement affiche la boîte de dialogue en mode modal, au-dessus de toute autre boîte de dialogue présente. Elle s'affiche dans la couche supérieure, accompagnée d'un pseudo-élément ::backdrop. Les éléments du même document que la boîte de dialogue, à l'exception de celle-ci et de ses descendants, deviennent inertes (comme si l'attribut inert était spécifié). Seul le document contenant est bloqué : si la boîte de dialogue est affichée dans une iframe, le reste de la page reste interactif.

Dans cet article

Syntaxe

showModal()

Paramètres

Aucun.

Valeur de retour

Aucune (undefined).

Exceptions

InvalidStateError DOMException

Levée si la boîte de dialogue est déjà ouverte et non modale (c'est-à-dire si elle a déjà été ouverte avec HTMLDialogElement.show()).

Exemples

Ouvrir une boîte de dialogue modale

L'exemple suivant montre un bouton qui, lorsqu'il est cliqué, ouvre une boîte de dialogue modale <dialog> contenant un formulaire via la fonction HTMLDialogElement.showModal(). Lorsque la boîte de dialogue est ouverte, tout le reste du contenu du document devient inerte. Vous pouvez alors cliquer sur le bouton Annuler pour fermer la boîte de dialogue (via la fonction HTMLDialogElement.close()), ou soumettre le formulaire avec le bouton de validation. Sélectionner le bouton d'annulation ferme la boîte de dialogue et déclenche un événement close, mais pas un événement cancel.

HTML

html
<!-- boîte de dialogue contextuelle contenant un formulaire -->
<dialog id="favDialog">
  <form method="dialog">
    <p>
      <label for="favAnimal">Animal préféré&nbsp;:</label>
      <select id="favAnimal" name="favAnimal">
        <option></option>
        <option>Crevette de saumure</option>
        <option>Panda roux</option>
        <option>Singes-araignées</option>
      </select>
    </p>
    <div>
      <button id="cancel" type="reset">Annuler</button>
      <button type="submit">Valider</button>
    </div>
  </form>
</dialog>

<div>
  <button id="updateDetails">Mettre à jour les informations</button>
</div>

JavaScript

js
const updateButton = document.getElementById("updateDetails");
const cancelButton = document.getElementById("cancel");
const dialog = document.getElementById("favDialog");
dialog.returnValue = "favAnimal";

function openCheck(dialog) {
  if (dialog.open) {
    console.log("Dialog open");
  } else {
    console.log("Dialog closed");
  }
}

// Le bouton met à jour ouvre la boîte de dialogue modale
updateButton.addEventListener("click", () => {
  dialog.showModal();
  openCheck(dialog);
});

// Le bouton annuler du formulaire ferme la boîte de dialogue
cancelButton.addEventListener("click", () => {
  dialog.close("animalNotChosen");
  openCheck(dialog);
});

L'élément HTML implémentant cette interface : <dialog>

Aider à améliorer MDN

Cette page vous a-t-elle été utile ?

Oui Non

Apprendre à contribuer

Cette page a été modifiée le 3 déc. 2025 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu

API HTML DOM
HTMLDialogElement
Propriétés d'instance
Méthodes d'instance
Évènements
1. cancel
2. close
Héritage
Pages liées à HTML DOM
Guides
1. Utiliser les microtâches en JavaScript avec queueMicrotask()
2. Aller plus loin : Les microtâches et l'environnement d'exécution JavaScript