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>  <form method="dialog">    <button type="submit">閉じる</button>  </form></dialog><p>  <button>ダイアログを開く</button></p><p></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);});