HTMLDialogElement: open-Eigenschaft

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit März 2022 browserübergreifend verfügbar.

Die open-Eigenschaft der HTMLDialogElement-Schnittstelle ist ein boolescher Wert, der das open HTML-Attribut widerspiegelt und angibt, ob das <dialog> zur Interaktion verfügbar ist.

In diesem Artikel

Wert

Ein boolescher Wert, der den Zustand des open HTML-Attributs darstellt. Ein Wert von true bedeutet, dass das Dialogfeld angezeigt wird, während false bedeutet, dass es nicht angezeigt wird.

Warnung: Obwohl die open-Eigenschaft technisch gesehen nicht schreibgeschützt ist und direkt gesetzt werden kann, wird davon stark abgeraten. Die HTML-Spezifikation weist darauf hin, dass dies zu unerwartetem Verhalten bei der normalen Dialog-Interaktion führen kann. Zum Beispiel wird das close-Ereignis nicht ausgelöst, wenn open programmatisch auf false gesetzt wird, und nachfolgende Aufrufe der Methoden close() und requestClose() haben keine Wirkung. Stattdessen sollten Methoden wie show(), showModal(), close() und requestClose() verwendet werden, um den Wert des open-Attributs zu ändern.

Beispiele

Öffnen eines Dialogs

Das folgende Beispiel zeigt einen einfachen Button, der beim Klicken ein <dialog> mit einem Formular über die showModal()-Methode öffnet. Von dort aus können Sie den Abbrechen-Button klicken, um das Dialogfeld zu schließen (über die HTMLDialogElement.close()-Methode), oder das Formular über den Senden-Button absenden.

Der Code protokolliert den Wert von open, wenn sich der Dialogstatus ändert.

HTML

html
<!-- Simple pop-up dialog box -->
<dialog id="dialog">
  <form method="dialog">
    <button type="submit">Close</button>
  </form>
</dialog>

<button id="open">Open Dialog</button>

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

JavaScript

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

js
const dialog = document.getElementById("dialog");
const openButton = document.getElementById("open");

function openCheck(dialog) {
  log(dialog.open ? "Dialog: open" : "Dialog: closed");
}

openButton.addEventListener("click", () => {
  dialog.showModal();
  openCheck(dialog);
});

dialog.addEventListener("close", () => {
  openCheck(dialog);
});

HTML <dialog>-Element

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

HTML DOM API
HTMLDialogElement
Instanzeigenschaften
Instanzmethoden
Events
1. cancel
2. close
Vererbung
Verwandte Seiten für HTML DOM
Anleitungen
1. Verwenden von Microtasks in JavaScript mit queueMicrotask()
2. Im Detail: Microtasks und die JavaScript-Laufzeitumgebung

HTMLDialogElement: open-Eigenschaft

In diesem Artikel

Wert

Beispiele

Öffnen eines Dialogs

HTML

JavaScript

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

Help improve MDN