HTMLDialogElement : méthode show()
Baseline
Large disponibilité
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 show() de l'interface HTMLDialogElement affiche la boîte de dialogue de manière non bloquante.
Une boîte de dialogue non bloquante est une boîte de dialogue où les utilisateur·ice·s peuvent interagir avec le contenu en dehors/derrière la boîte de dialogue ouverte.
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 bloquante (c'est-à-dire si elle a déjà été ouverte avec
HTMLDialogElement.showModal()).
Exemples
Utilisation simple
L'exemple suivant montre un simple bouton qui, lorsqu'il est cliqué, ouvre un élément <dialog> avec la méthode show().
Lorsque la boîte de dialogue est ouverte, vous pouvez toujours interagir avec le reste de la page, y compris cliquer sur le bouton Cliquez-moi qui déclenche une alerte.
Vous pouvez cliquer sur le bouton Fermer la boîte de dialogue pour fermer la boîte de dialogue (avec la méthode close()).
<dialog id="dialogue">
<button type="button" id="fermer">Fermer la boîte de dialogue</button>
</dialog>
<p><button id="ouvrir">Ouvrir la boîte de dialogue</button></p>
<p><button id="alerte">Déclencher une alerte</button></p>
JavaScript
const dialogue = document.getElementById("dialogue");
const ouvrirButton = document.getElementById("ouvrir");
const fermerButton = document.getElementById("fermer");
const alerteButton = document.getElementById("alerte");
// Le bouton ouvrir ouvre une boîte de dialogue non bloquante
ouvrirButton.addEventListener("click", () => {
dialogue.show();
});
// Le bouton alerte déclenche une alerte
alerteButton.addEventListener("click", () => {
alert("vous m'avez cliqué !");
});
// Le bouton fermer ferme la boîte de dialogue
fermerButton.addEventListener("click", () => {
dialogue.close();
});
Résultat
Spécifications
| Spécification |
|---|
| HTML # dom-dialog-show-dev |
Compatibilité des navigateurs
Voir aussi
- L'élément HTML
<dialog> - La méthode
HTMLDialogElement.showModal()