HTMLDialogElement : propriété returnValue

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 propriété returnValue de l'interface HTMLDialogElement est une chaîne de caractères (string) représentant la valeur de retour pour un élément <dialog> lorsqu'il est fermé. Vous pouvez définir cette valeur directement (dialog.returnValue = "résultat") ou en fournissant la valeur comme argument de type string à close() ou requestClose().

Dans cet article

Valeur

Une chaîne de caractères représentant la valeur de retour (returnValue) de la boîte de dialogue. La valeur par défaut est une chaîne vide ("").

Exemples

Vérifier la valeur de retour

L'exemple suivant affiche un bouton pour ouvrir une boîte de dialogue. Celle-ci demande à l'utilisateur·ice s'il·elle accepte les conditions d'utilisation.

La boîte de dialogue contient des boutons « Accepter » ou « Refuser » : lorsque l'utilisateur·ice clique sur l'un des boutons, le gestionnaire d'événement ferme la boîte de dialogue en passant le choix à la fonction close(). Ce choix est alors assigné à la propriété returnValue de la boîte de dialogue.

Dans le gestionnaire d'événement close de la boîte de dialogue, l'exemple met à jour le texte d'état de la page principale pour afficher la valeur de returnValue.

Si l'utilisateur·ice ferme la boîte de dialogue sans cliquer sur un bouton (par exemple, en appuyant sur la touche Échap), alors la valeur de retour n'est pas définie.

HTML

html
<dialog id="termsDialog">
  <p>Acceptez-vous les conditions d'utilisation&nbsp;?</p>
  <button id="declineButton" value="refusé">Refuser</button>
  <button id="acceptButton" value="accepté">Accepter</button>
</dialog>
<p>
  <button id="openDialogButton">Lire les CGU</button>
</p>
<p id="statusText"></p>

JavaScript

js
const dialog = document.getElementById("termsDialog");
const statusText = document.getElementById("statusText");

const openDialogButton = document.getElementById("openDialogButton");
const declineButton = document.getElementById("declineButton");
const acceptButton = document.getElementById("acceptButton");

openDialogButton.addEventListener("click", () => {
  dialog.showModal();
});

declineButton.addEventListener("click", closeDialog);
acceptButton.addEventListener("click", closeDialog);

function closeDialog(event) {
  const button = event.target;
  dialog.close(button.value);
}

dialog.addEventListener("close", () => {
  statusText.innerText = dialog.returnValue
    ? `Valeur de retour : ${dialog.returnValue}`
    : "Aucune valeur de retour";
});

Résultat

Essayez de cliquer sur « Lire les CGU », puis choisissez les boutons « Accepter » ou « Refuser » dans la boîte de dialogue, ou fermez la boîte de dialogue en appuyant sur la touche Échap, et observez les différents états affichés.

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