HTMLDialogElement: open プロパティ

Baseline 2022

Newly available

Since March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

open は HTMLDialogElement インターフェイスのプロパティで、HTML の open 属性を反映した論理値です。これは <dialog> が操作できる状態であるかどうかを示します。

値

論理値で、HTML の open 属性の状態を表します。true は設定されており、従ってダイアログは表示されています。false は設定されておらず、従ってダイアログは表示されていません。

このプロパティは読み取り専用になりました。プログラムにより値を設定してダイアログを表示または非表示にすることは可能です。

例

以下の例では、クリックするとフォームを含む <dialog> を showModal() メソッドで開くための単純なボタンを示しています。そこから Cancel ボタンをクリックしてダイアログを閉じたり（HTMLDialogElement.close() メソッドで）、送信ボタンでフォームを送信したりすることができます。

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>

結果

仕様書

Specification
HTML Standard # dom-dialog-open

ブラウザーの互換性

BCD tables only load in the browser

値

例

結果

仕様書

ブラウザーの互換性

関連情報