HTMLDialogElement.open — Eigenschaft · JavaScript-Referenz

Signatur

HTMLDialogElement.open

Beschreibung

Die Eigenschaft open eines HTMLDialogElement spiegelt das gleichnamige HTML-Attribut wider. Ist das Attribut vorhanden, liefert sie true, sonst false. Damit lässt sich jederzeit prüfen, ob ein Dialog gerade angezeigt wird, z. B. um doppeltes Öffnen zu verhindern oder einen Umschalt-Button zu bauen.

Lesend ist open der empfohlene Weg, den Zustand abzufragen. Zum Öffnen und Schließen sollten Sie aber die Methoden show(), showModal() und close() verwenden. Wenn Sie dialog.open = true direkt setzen, erscheint der Dialog zwar, aber nicht modal: Er landet nicht im Top-Layer, es gibt kein ::backdrop, der Hintergrund bleibt bedienbar und die Escape-Taste schließt ihn nicht.

Wenn Sie open = false setzen, wird das Attribut entfernt und der Dialog ausgeblendet. Dabei wird aber kein close-Event ausgelöst, returnValue wird nicht gesetzt und der Fokus nicht zurückgegeben. Deshalb ist close() fast immer die bessere Wahl.

Ob ein offener Dialog modal ist, verrät open nicht. Das prüfen Sie z. B. mit dialog.matches(':modal').

Rückgabewert

Typ

boolean

Beschreibung

true, wenn das Attribut open gesetzt ist (Dialog sichtbar), sonst false. Die Eigenschaft ist beschreibbar; beim Setzen wird das Attribut hinzugefügt oder entfernt.

Beispiele

Zustand abfragen und Dialog umschalten

// HTML: <dialog id="info"><p>Hallo!</p></dialog><button id="toggle">Info</button>
const dialog = document.querySelector('#info');
const button = document.querySelector('#toggle');

button.addEventListener('click', () => {
  if (dialog.open) {
    dialog.close();
  } else {
    dialog.showModal();
  }
  console.log('Dialog offen:', dialog.open);
});

Dialog offen: true (nach erneutem Klick) Dialog offen: false

Doppeltes Öffnen verhindern

const confirmDialog = document.querySelector('#confirm');

const askUser = () => {
  // showModal() auf einem bereits offenen, nicht-modalen Dialog wirft einen InvalidStateError
  if (confirmDialog.open) return;
  confirmDialog.showModal();
};

askUser();
askUser(); // wird ignoriert
console.log(confirmDialog.open);

true

Unterschied: open setzen vs. showModal()

const dialog = document.createElement('dialog');
dialog.textContent = 'Test';
document.body.append(dialog);

dialog.open = true; // nicht modal, kein Backdrop, kein Escape
console.log(dialog.hasAttribute('open'), dialog.matches(':modal'));

dialog.open = false; // kein 'close'-Event!
dialog.showModal();
console.log(dialog.open, dialog.matches(':modal'));

true false true true

Zustand über das close-Event synchron halten

const dialog = document.querySelector('#settings');
const status = document.querySelector('#status');

const update = () => {
  status.textContent = dialog.open ? 'Einstellungen geöffnet' : 'Geschlossen';
};

dialog.addEventListener('close', update);
document.querySelector('#openSettings').addEventListener('click', () => {
  dialog.showModal();
  update();
});

// Wichtig · Fallstricke

Nicht zum Öffnen verwenden: Wenn Sie open = true setzen, erzeugen Sie einen nicht-modalen Dialog ohne Top-Layer, ohne ::backdrop, ohne Fokus-Falle und ohne Schließen per Escape. Das ist oft ein Problem für die Barrierefreiheit. Verwenden Sie show() oder showModal().
Kein close-Event: Bei open = false werden weder das Event close noch returnValue noch die Fokus-Rückgabe ausgelöst. Nutzen Sie stattdessen close().
InvalidStateError: Wenn Sie showModal() auf einem Dialog aufrufen, der bereits nicht-modal geöffnet ist (also open ist true), wird eine Ausnahme geworfen. Ist er bereits modal geöffnet, passiert nichts. Prüfen Sie vorher open.
Modalität erkennen: open unterscheidet nicht zwischen modal und nicht-modal. Dafür gibt es dialog.matches(':modal').
Kompatibilität: <dialog> und open werden seit 2022 von allen modernen Browsern unterstützt (Chrome 37+, Firefox 98+, Safari 15.4+). Für ältere Browser gibt es das Polyfill dialog-polyfill.
In CSS können Sie offene Dialoge über dialog[open] ansprechen, in neueren Browsern auch über die Pseudoklasse :open.

Siehe auch

HTMLDialogElement.closedBy HTMLDialogElement.returnValue HTMLDetailsElement.open HTMLAnchorElement.href HTMLAnchorElement.ping