HTMLDialogElement : méthode showModal()

Baseline Widely available

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éthodeshowModal() de l'interfaceHTMLDialogElement affiche la boîte de dialogue en mode modal, au-dessus de toute autre boîte de dialogue présente. Elle s'affiche dans lacouche 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, deviennentinertes (comme si l'attributinert é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.

Syntaxe

showModal()

Paramètres

Aucun.

Valeur de retour

Aucune (undefined).

Exceptions

InvalidStateErrorDOMException: 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 avecHTMLDialogElement.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 fonctionHTMLDialogElement.showModal(). Lorsque la boîte de dialogue est ouverte, tout le reste du contenu du document devient inerte. Vous pouvez alors cliquer sur le boutonAnnuler pour fermer la boîte de dialogue (via la fonctionHTMLDialogElement.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énementclose, mais pas un événementcancel.

HTML

html

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

JavaScript

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 modaleupdateButton.addEventListener("click", () => {  dialog.showModal();  openCheck(dialog);});// Le bouton annuler du formulaire ferme la boîte de dialoguecancelButton.addEventListener("click", () => {  dialog.close("animalNotChosen");  openCheck(dialog);});