HTMLDialogElement : méthode show()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since mars 2022.
La méthode show() de l'interface HTMLDialogElement affiche la boîte de dialogue de manière non modale, c'est-à-dire en permettant toujours l'interaction avec le contenu en dehors de la boîte de dialogue.
Syntaxe
show()
Paramètres
Aucun.
Valeur de retour
Aucune (undefined).
Exceptions
InvalidStateErrorDOMException-
Levée si la boîte de dialogue est déjà ouverte et modale (c'est-à-dire si elle a déjà été ouverte avec
HTMLDialogElement.showModal()).
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 show(). Vous pouvez ensuite cliquer sur le bouton Annuler pour fermer la boîte de dialogue (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">
<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 id="cancel" type="reset">Annuler</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 cancelButton = document.getElementById("cancel");
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 met à jour et ouvre la boîte de dialogue non modale
updateButton.addEventListener("click", () => {
dialog.show();
openCheck(dialog);
});
// Le bouton d'annulation du formulaire ferme la boîte de dialogue
cancelButton.addEventListener("click", () => {
dialog.close("animalNonChoisi");
openCheck(dialog);
});
Spécifications
| Specification |
|---|
| HTML # dom-dialog-show-dev |
Compatibilité des navigateurs
Loading…
Voir aussi
- Élément HTML implémentant cette interface :