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é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.
Syntaxe
close()
close(returnValue)
Paramètres
returnValueFacultatif-
Chaî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éthode showModal().
Depuis cette boîte de dialogue, vous pouvez cliquer sur le bouton X pour la fermer (via la méthode HTMLDialogElement.close()), ou soumettre le formulaire avec le bouton de validation.
<!-- Boîte de dialogue simple contenant un formulaire -->
<dialog id="favDialog">
<form method="dialog">
<button id="close" aria-label="fermer" formnovalidate>X</button>
<section>
<p>
<label for="favAnimal">Animal préféré :</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>
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 modale
updateButton.addEventListener("click", () => {
dialog.showModal();
openCheck(dialog);
});
// Le bouton de fermeture du formulaire ferme la boîte de dialogue
closeButton.addEventListener("click", () => {
dialog.close("animalNonChoisi");
openCheck(dialog);
});
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 method, donc aucun bouton « close » n'est requis.
Résultat
Spécifications
| Specification |
|---|
| HTML # dom-dialog-close-dev |
Compatibilité des navigateurs
Chargement…
Voir aussi
- Élément HTML implémentant cette interface :