HTMLDialogElement : méthode showModal()
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 showModal() de l'interface HTMLDialogElement affiche la boîte de dialogue en mode modal, au-dessus de toute autre boîte de dialogue présente. Elle s'affiche dans la couche supérieure, 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 spécifié). 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
Ouvrir une boîte de dialogue modale
L'exemple suivant montre un bouton qui, lorsqu'il est cliqué, ouvre une boîte de dialogue modale <dialog> contenant un formulaire via la fonction HTMLDialogElement.showModal(). Lorsque la boîte de dialogue est ouverte, tout le reste du contenu du document devient inerte. Vous pouvez alors cliquer sur le bouton Annuler pour fermer la boîte de dialogue (via la fonction HTMLDialogElement.close()), ou soumettre le formulaire avec le bouton de validation. Sélectionner le bouton d'annulation ferme la boîte de dialogue et déclenche un événement close, mais pas un événement cancel.
HTML
<!-- boîte de dialogue contextuelle contenant un formulaire -->
<dialog id="favDialog">
<form method="dialog">
<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>Singes-araignées</option>
</select>
</p>
<div>
<button id="cancel" type="reset">Annuler</button>
<button type="submit">Valider</button>
</div>
</form>
</dialog>
<div>
<button id="updateDetails">Mettre à jour les informations</button>
</div>
JavaScript
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("Dialog open");
} else {
console.log("Dialog closed");
}
}
// Le bouton met à jour ouvre la boîte de dialogue modale
updateButton.addEventListener("click", () => {
dialog.showModal();
openCheck(dialog);
});
// Le bouton annuler du formulaire ferme la boîte de dialogue
cancelButton.addEventListener("click", () => {
dialog.close("animalNotChosen");
openCheck(dialog);
});
Résultat
Spécifications
| Specification |
|---|
| HTML # dom-dialog-showmodal-dev |
Compatibilité des navigateurs
Loading…
Voir aussi
- Élément HTML implémentant cette interface :