Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
HTMLDialogElement : méthode requestClose()
Baseline 2025Newly available
Depuis May 2025, cette fonctionnalité fonctionne sur les appareils et les versions de navigateur les plus récents. Elle peut ne pas fonctionner sur les appareils ou navigateurs plus anciens.
La méthoderequestClose() de l'interfaceHTMLDialogElement demande la fermeture de l'élément HTML<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 deHTMLDialogElement.close() car elle déclenche d'abord un événementcancel, puis l'événementclose.Les auteur·ice·s peuvent appelerEvent.preventDefault() dans le gestionnaire de l'événementcancel 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
requestClose()requestClose(returnValue)Paramètres
returnValueFacultatifChaîne de caractères représentant la nouvelle valeur de
HTMLDialogElement.returnValuede la boîte de dialogue.
Valeur de retour
Aucune (undefined).
Exemples
Utilisation derequestClose()
L'exemple suivant montre un simple bouton qui, lorsqu'il est cliqué, ouvre un élément<dialog> contenant un formulaire via la méthodeshowModal(). Une fois ouvert, vous pouvez cliquer sur le boutonX pour demander la fermeture de la boîte de dialogue (via la méthodeHTMLDialogElement.requestClose()), ou soumettre le formulaire avec le boutonValider.
HTML
<!-- Boîte de dialogue simple contenant un formulaire --><dialog> <form method="dialog"> <button type="button" aria-label="fermer" formnovalidate> X </button> <section> <p> <label for="favAnimal">Animal préféré :</label> <select 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>Mettre à jour les informations</button>JavaScript
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 modaleupdateButton.addEventListener("click", () => { dialog.showModal();});// Le bouton de fermeture du formulaire demande la fermeture de la boîte de dialoguecloseButton.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é detype="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é sila méthode du formulaire estdialog, donc aucun bouton « close » n'est requis.
Résultat
Spécifications
| Specification |
|---|
| HTML # dom-dialog-requestclose |
Compatibilité des navigateurs
Voir aussi
- L'élément HTML implémentant cette interface :
<dialog>