HTMLDialogElement : méthode showModal()
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 showModal() de l'interface HTMLDialogElement affiche la boîte de dialogue en mode bloquante, au-dessus de toute autre boîte de dialogue présente.
Une boîte de dialogue bloquante s'affiche dans la top layer, accompagnée d'un pseudo-élément ::backdrop.
Les éléments du même document que la boîte de dialogue, à l'exception de celle-ci et de ses descendants, deviennent inertes (comme si l'attribut inert était défini).
Seul le document contenant est bloqué : si la boîte de dialogue est affichée dans une iframe, le reste de la page reste interactif.
Syntaxe
showModal()
Paramètres
Aucun.
Valeur de retour
Aucune (undefined).
Exceptions
InvalidStateErrorDOMException-
Levée si la boîte de dialogue est déjà ouverte et non modale (c'est-à-dire si elle a déjà été ouverte avec
HTMLDialogElement.show()).
Exemples
Utilisation simple
L'exemple suivant montre un simple bouton qui, lorsqu'il est cliqué, ouvre un élément <dialog> avec la méthode showModal().
Lorsque la boîte de dialogue est ouverte, vous ne pouvez pas interagir avec le reste de la page, y compris cliquer sur le bouton Cliquez-moi qui déclenche autrement 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()).
HTML
<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 bloquante
ouvrirButton.addEventListener("click", () => {
dialogue.showModal();
});
// 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-showmodal-dev |
Compatibilité des navigateurs
Voir aussi
- L'élément HTML
<dialog> - La méthode
HTMLDialogElement.show()