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.

En savoir plus
Voir la compatibilité complète

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. L'évènement close est déclenché après la fermeture de la boîte de dialogue. Contrairement à l'appel de HTMLDialogElement.requestClose(), l'opération de fermeture ne peut pas être annulée.

Syntaxe

close()
close(returnValue)

Paramètres

returnValue Facultatif: Une chaîne de caractères qui remplace la valeur existante de HTMLDialogElement.returnValue.

Valeur de retour

Aucune (undefined).

Exemples

Fermer un dialogue

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

Le bouton Fermer ferme la boîte de dialogue sans returnValue, tandis que le bouton Fermer avec valeur de retour ferme la boîte de dialogue avec un returnValue.

HTML

html

<dialog id="dialogue">
  <button type="button" id="fermer">Fermer</button>
  <button type="button" id="fermer-avec-valeur">
    Fermer avec valeur de retour
  </button>
</dialog>

<button id="ouvrir">Ouvrir la boîte de dialogue</button>

<pre id="journal"></pre>

#journal {
  height: 170px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

JavaScript

const elementJournal = document.getElementById("journal");
function journaliser(texte) {
  elementJournal.innerText = `${elementJournal.innerText}${texte}\n`;
  elementJournal.scrollTop = elementJournal.scrollHeight;
}

const dialogue = document.getElementById("dialogue");
const boutonOuvrir = document.getElementById("ouvrir");
const boutonFermer = document.getElementById("fermer");
const boutonFermerAvecValeur = document.getElementById("fermer-avec-valeur");

// Le bouton d'ouverture ouvre une boîte de dialogue modale
boutonOuvrir.addEventListener("click", () => {
  // Réinitialiser la valeur de retour
  dialogue.returnValue = "";
  // Afficher la boîte de dialogue
  dialogue.showModal();
});

// Le bouton Fermer ferme la boîte de dialogue
boutonFermer.addEventListener("click", () => {
  dialogue.close();
});

// Le bouton Fermer avec valeur de retour ferme la boîte de dialogue avec une valeur de retour
boutonFermerAvecValeur.addEventListener("click", () => {
  dialogue.close(`Fermé à ${new Date().toLocaleTimeString()}`);
});

// Le bouton de fermeture du formulaire ferme la boîte de dialogue
dialogue.addEventListener("close", () => {
  journaliser(
    `Boîte de dialogue fermée. Valeur de retour : "${dialogue.returnValue}"`,
  );
});

Note : Vous savez que vous pouvez également fermer automatiquement une <dialog> en envoyant un élément <form> avec un attribut method="dialog".

Résultat

Spécifications

Spécification
HTML # dom-dialog-close-dev

Compatibilité des navigateurs

Voir aussi

L'élément HTML <dialog>
L'évènement close
La méthode HTMLDialogElement.requestClose()

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 8 juil. 2026 par les contributeur·ice·s du MDN.

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