HTMLDialogElement : propriété open
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 propriété open de l'interface HTMLDialogElement est une valeur booléenne reflétant l'attribut HTML open, indiquant si la boîte de dialogue <dialog> est disponible pour l'interaction.
Valeur
Une valeur booléenne représentant l'état de l'attribut HTML open. Une valeur true signifie que la boîte de dialogue est affichée, tandis que false signifie qu'elle ne l'est pas.
Attention :
Bien que la propriété open ne soit techniquement pas en lecture seule et puisse être modifiée directement, cela est fortement déconseillé par la spécification HTML (angl.), car cela peut perturber le fonctionnement normal des boîtes de dialogue de façon inattendue. Par exemple, l'événement close ne sera pas déclenché si open est défini à false par programmation, et les appels suivants à close() et requestClose() n'auront aucun effet. Il est donc préférable d'utiliser les méthodes show(), showModal(), close() et requestClose() pour modifier la valeur de l'attribut open.
Exemples
L'exemple suivant montre un simple bouton qui, lorsqu'il est cliqué, ouvre une boîte de dialogue <dialog> contenant un formulaire via la méthode showModal(). 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 -->
<dialog id="dialog">
<form method="dialog">
<button type="submit">Fermer</button>
</form>
</dialog>
<p>
<button id="openDialog">Ouvrir la boîte de dialogue</button>
</p>
<p id="dialogStatus"></p>
const openDialog = document.getElementById("openDialog");
const dialog = document.getElementById("dialog");
const text = document.getElementById("dialogStatus");
function openCheck(dialog) {
if (dialog.open) {
text.innerText = "Boîte de dialogue ouverte";
} else {
text.innerText = "Boîte de dialogue fermée";
}
}
// Le bouton met à jour et ouvre la boîte de dialogue modale
openDialog.addEventListener("click", () => {
dialog.showModal();
openCheck(dialog);
});
dialog.addEventListener("close", () => {
openCheck(dialog);
});
Résultat
Spécifications
| Specification |
|---|
| HTML # dom-dialog-open |
Compatibilité des navigateurs
Chargement…
Voir aussi
- Élément HTML implémentant cette interface :