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 ⁨2022年3月⁩.

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

値

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

警告: open プロパティは技術的には読み取り専用ではなく直接設定可能ですが、HTML 仕様書では強く禁じています。通常のダイアログ操作が予期せぬ形で破損する可能性があるためです。例えば、open をプログラムで false に設定しても、close イベントは発生せず、その後の close() および requestClose() メソッドの呼び出しは効果がなくなります。代わりに、show()、showModal()、close()、requestClose()などのメソッドを使用して open 属性の値を変更することをお勧めします。

例

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

html

<!-- 単純なポップアップダイアログボックス -->
<dialog id="dialog">
  <form method="dialog">
    <button type="submit">閉じる</button>
  </form>
</dialog>

<p>
  <button id="openDialog">ダイアログを開く</button>
</p>
<p id="dialogStatus"></p>

const openDialog = document.getElementById("openDialog");
const dialog = document.getElementById("dialog");
const text = document.getElementById("dialogStatus");

function openCheck(dialog) {
  if (dialog.open) {
    text.innerText = "ダイアログが開きました";
  } else {
    text.innerText = "ダイアログが閉じました";
  }
}

// ボタンでモーダルダイアログを開く
openDialog.addEventListener("click", () => {
  dialog.showModal();
  openCheck(dialog);
});

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