HTMLDialogElement: open-Eigenschaft

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

Die open-Eigenschaft des HTMLDialogElement-Interfaces ist ein boolescher Wert, der das open-HTML-Attribut widerspiegelt und anzeigt, ob das <dialog> für Interaktionen verfügbar ist.

Wert

Ein boolescher Wert, der den Zustand des open-HTML-Attributs darstellt. true bedeutet, es ist gesetzt und daher wird der Dialog angezeigt. false bedeutet, es ist nicht gesetzt und daher wird der Dialog nicht angezeigt.

Die Eigenschaft ist nicht schreibgeschützt — es ist möglich, den Wert zu setzen, um den Dialog programmatisch anzuzeigen oder zu verbergen.

Beispiele

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

html

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

<p>
  <button id="openDialog">Open Dialog</button>
</p>
<p id="dialogStatus"></p>

<script>
  (() => {
    const openDialog = document.getElementById("openDialog");
    const dialog = document.getElementById("dialog");
    const text = document.getElementById("dialogStatus");

    function openCheck(dialog) {
      if (dialog.open) {
        text.innerText = "Dialog open";
      } else {
        text.innerText = "Dialog closed";
      }
    }

    // Update button opens a modal dialog
    openDialog.addEventListener("click", () => {
      dialog.showModal();
      openCheck(dialog);
    });

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

Ergebnis

Spezifikationen

Specification
HTML Standard # dom-dialog-open

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

Das HTML-Element, das dieses Interface implementiert: <dialog>.