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.

En savoir plus
Voir la compatibilité complète

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 définie directement, il est fortement déconseillé de le faire selon la spécification HTML ^(angl.), car cela peut perturber les interactions normales avec la boîte de dialogue de manière inattendue. Par exemple, l'évènement close ne se déclenche pas lorsque la propriété open est définie programmatiquement sur false, et les appels ultérieurs aux méthodes close() et requestClose() n'ont aucun effet. Il est préférable d'utiliser des méthodes telles que show(), showModal(), close(), et requestClose() pour modifier la valeur de l'attribut open.

Exemples

Ouvrir une boîte de dialogue

L'exemple suivant montre un simple bouton qui, lorsqu'il est cliqué, ouvre une boîte de dialogue <dialog> contenant un formulaire avec la méthode showModal(). Vous pouvez ensuite cliquer sur le bouton Annuler pour fermer la boîte de dialogue (avec la méthode HTMLDialogElement.close()), ou envoyer le formulaire avec le bouton de validation.

Le code enregistre la valeur de open lorsque l'état de la boîte de dialogue change.

HTML

html

<!-- Boîte de dialogue simple -->
<dialog id="dialogue">
  <form method="dialog">
    <button type="submit">Fermer</button>
  </form>
</dialog>

<button id="ouvrir">Ouvrir la boîte de dialogue</button>

<pre id="journal"></pre>

#journal {
  height: 170px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

JavaScript

const elementJournal = document.getElementById("journal");
function log(text) {
  elementJournal.innerText = `${elementJournal.innerText}${text}\n`;
  elementJournal.scrollTop = elementJournal.scrollHeight;
}

const dialogue = document.getElementById("dialogue");
const boutonOuvrir = document.getElementById("ouvrir");

function verifierOuverture(dialogue) {
  log(dialogue.open ? "Boîte : ouverte" : "Boîte : fermée");
}

boutonOuvrir.addEventListener("click", () => {
  dialogue.showModal();
  verifierOuverture(dialogue);
});

Résultat

Spécifications

Spécification
HTML # dom-dialog-open

Compatibilité des navigateurs

Voir aussi

L'élément HTML <dialog>

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 8 juil. 2026 par les contributeur·ice·s du MDN.

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