HTMLDialogElement : propriété open

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 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.

Dans cet article

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.

html
<!-- 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>

js
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);
});

L'élément HTML implémentant cette interface : <dialog>

Aider à améliorer MDN

Cette page vous a-t-elle été utile ?

Oui Non

Apprendre à contribuer

Cette page a été modifiée le 3 déc. 2025 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu

API HTML DOM
HTMLDialogElement
Propriétés d'instance
Méthodes d'instance
Évènements
1. cancel
2. close
Héritage
Pages liées à HTML DOM
Guides
1. Utiliser les microtâches en JavaScript avec queueMicrotask()
2. Aller plus loin : Les microtâches et l'environnement d'exécution JavaScript

HTMLDialogElement : propriété open

Dans cet article

Valeur

Exemples

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

Aider à améliorer MDN