このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

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月⁩.

openHTMLDialogElement インターフェイスのプロパティで、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>
js
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);
});

結果

仕様書

Specification
HTML
# dom-dialog-open

ブラウザーの互換性

関連情報

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