HTMLDialogElement: open プロパティ

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.

openHTMLDialogElement インターフェイスのプロパティで、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
# dom-dialog-open

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
open

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報

  • このインターフェイスを実装している HTML 要素: <dialog>