Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

HTMLDialogElement : méthode requestClose()

Baseline 2025
Newly available

Since ⁨May 2025⁩, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

La méthode requestClose() de l'interface HTMLDialogElement demande la fermeture de 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.

Cette méthode diffère de HTMLDialogElement.close() car elle déclenche d'abord un événement cancel, puis l'événement close. Les auteur·ice·s peuvent appeler Event.preventDefault() dans le gestionnaire de l'événement cancel pour empêcher la fermeture de la boîte de dialogue.

Cette méthode expose le même comportement que le mécanisme interne de surveillance de fermeture (close watcher en anglais) du dialogue.

Syntaxe

js
requestClose()
requestClose(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

Utilisation de requestClose()

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(). Une fois ouvert, vous pouvez cliquer sur le bouton X pour demander la fermeture de la boîte de dialogue (via la méthode HTMLDialogElement.requestClose()), ou soumettre le formulaire avec le bouton Valider.

HTML

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

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

JavaScript

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

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

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

function dialogShouldNotClose() {
  // Ajouter la logique pour décider si la boîte de dialogue doit se fermer.
  // Fermeture empêchée par défaut
  return true;
}

dialog.addEventListener("cancel", (event) => {
  if (!event.cancelable) return;
  if (dialogShouldNotClose()) {
    console.log("Fermeture empêchée");
    event.preventDefault();
  }
});

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 dialog, donc aucun bouton « close » n'est requis.

Résultat

Spécifications

Specification
HTML
# dom-dialog-requestclose

Compatibilité des navigateurs

Voir aussi

  • Élément HTML implémentant cette interface :