HTMLDialogElement : méthode close()

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 close() de l'interface HTMLDialogElement ferme l'élément <dialog>. Une chaîne de caractères optionnelle peut être passée en argument, ce qui met à jour la propriété returnValue de la boîte de dialogue.

Dans cet article

Syntaxe

js
close()
close(returnValue)

Paramètres

returnValue Facultatif

Chaîne de caractères représentant la nouvelle valeur de HTMLDialogElement.returnValue de la boîte de dialogue.

Valeur de retour

Aucune (undefined).

Exemples

L'exemple suivant montre un simple bouton qui, lorsqu'il est cliqué, ouvre un élément <dialog> contenant un formulaire via la méthode showModal(). Depuis cette boîte de dialogue, vous pouvez cliquer sur le bouton X pour la fermer (via la méthode HTMLDialogElement.close()), ou soumettre le formulaire avec le bouton de validation.

html
<!-- Boîte de dialogue simple contenant un formulaire -->
<dialog id="favDialog">
  <form method="dialog">
    <button type="button" id="close" aria-label="fermer">X</button>
    <section>
      <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>Singe-araignée</option>
        </select>
      </p>
    </section>
    <menu>
      <li>
        <button type="reset">Réinitialiser</button>
      </li>
      <li>
        <button type="submit">Valider</button>
      </li>
    </menu>
  </form>
</dialog>

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

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

function openCheck(dialog) {
  if (dialog.open) {
    console.log("Boîte de dialogue ouverte");
  } else {
    console.log("Boîte de dialogue fermée");
  }
}

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

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

Si le bouton « X » avait été de type="submit", la boîte de dialogue se serait fermée sans nécessiter de JavaScript. La soumission d'un formulaire ferme la balise <dialog> dans laquelle il est imbriqué si la méthode du formulaire est method, donc aucun bouton « close » n'est requis.

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

HTMLDialogElement : méthode close()

Dans cet article

Syntaxe

Paramètres

Valeur de retour

Exemples

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

Aider à améliorer MDN