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()
メソッドで)、送信ボタンでフォームを送信したりすることができます。
<!-- 単純なポップアップダイアログボックス -->
<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);
});
結果
仕様書
Specification |
---|
HTML> # dom-dialog-open> |
ブラウザーの互換性
Loading…
関連情報
- このインターフェイスを実装している HTML 要素:
<dialog>