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 close()
Baseline Widely available
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éthodeclose() de l'interfaceHTMLDialogElement 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.
Syntaxe
close()close(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
L'exemple suivant montre un simple bouton qui, lorsqu'il est cliqué, ouvre un élément<dialog> contenant un formulaire via la méthodeshowModal().Depuis cette boîte de dialogue, vous pouvez cliquer sur le boutonX pour la fermer (via la méthodeHTMLDialogElement.close()), ou soumettre le formulaire avec le bouton de validation.
<!-- Boîte de dialogue simple contenant un formulaire --><dialog> <form method="dialog"> <button type="button" aria-label="fermer">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>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 modaleupdateButton.addEventListener("click", () => { dialog.showModal(); openCheck(dialog);});// Le bouton de fermeture du formulaire ferme la boîte de dialoguecloseButton.addEventListener("click", () => { dialog.close("animalNonChoisi"); openCheck(dialog);});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 estmethod, donc aucun bouton « close » n'est requis.
Résultat
Spécifications
| Specification |
|---|
| HTML # dom-dialog-close-dev |
Compatibilité des navigateurs
Voir aussi
- L'élément HTML implémentant cette interface :
<dialog>