HTMLDialogElement
HTMLDialogElement インターフェイスは <dialog> 要素を操作するメソッドを提供します。 HTMLElement インターフェイスからプロパティとメソッドを継承しています。
インスタンスプロパティ
親である HTMLElement から継承したプロパティがあります。
HTMLDialogElement.open-
論理値で、ダイアログが操作可能であることを示す
open属性の値を反映します。 HTMLDialogElement.returnValue-
文字列で、ダイアログの返値を設定または返却します。
インスタンスメソッド
親である HTMLElement から継承したメソッドがあります。
HTMLDialogElement.close()-
ダイアログを閉じます。任意で引数として文字列を渡すことができ、これがダイアログの
returnValueを更新します。 HTMLDialogElement.show()-
ダイアログをモードレスで開きます。すなわち、その間にダイアログの外のコンテンツが操作できます。
HTMLDialogElement.showModal()-
ダイアログをモーダルで、他のダイアログがあればその最も上に表示します。ダイアログの外の操作はブロックされます。ダイアログの外はすべて inert となり、ダイアログの外の操作はブロックされます。
イベント
親インターフェイスである HTMLElement から継承したイベントがあります。
これらのイベントを addEventListener() を使用して、またはこのインターフェイスの onイベント名 プロパティにイベントリスナーを代入することによって待ち受けます。
close-
エスケープキー、
HTMLDialogElement.close()メソッド、またはmethod="dialog"でダイアログ内のフォームを送信することによって、このダイアログが閉じられたときに発行されます。
例
モーダルダイアログを開く
以下の例はボタンを表示し、クリックすると、フォームの入ったモーダルダイアログ (<dialog>) を HTMLDialogElement.showModal() 関数によって開きます。そこから Cancel ボタンを押して (HTMLDialogElement.close() 関数で) ダイアログを閉じるか、送信ボタンでフォームを送信するかします。Cancel ボタンを選択すると、close イベントを生成します。cancel イベントではありません。
HTML
<!-- フォームが入ったポップアップダイアログボックス -->
<dialog id="favDialog">
<form method="dialog">
<p>
<label for="favAnimal">好きな動物:</label>
<select id="favAnimal" name="favAnimal">
<option></option>
<option>アルテミア</option>
<option>レッサーパンダ</option>
<option>クモザル</option>
</select>
</p>
<div>
<button id="cancel" type="reset">キャンセル</button>
<button type="submit">確認</button>
</div>
</form>
</dialog>
<div>
<button id="updateDetails">詳細を更新</button>
</div>
JavaScript
const updateButton = document.getElementById("updateDetails");
const cancelButton = document.getElementById("cancel");
const dialog = document.getElementById("favDialog");
dialog.returnValue = "favAnimal";
function openCheck(dialog) {
if (dialog.open) {
console.log("Dialog open");
} else {
console.log("Dialog closed");
}
}
// 更新ボタンを押すとモーダルダイアログが開く
updateButton.addEventListener("click", () => {
dialog.showModal();
openCheck(dialog);
});
// ダイアログボックスを閉じるフォームキャンセルボタン
cancelButton.addEventListener("click", () => {
dialog.close("animalNotChosen");
openCheck(dialog);
});
結果
仕様書
| Specification |
|---|
| HTML # htmldialogelement |
| HTML # event-beforetoggle |
| HTML # event-toggle |
ブラウザーの互換性
api.HTMLDialogElement
api.HTMLElement.beforetoggle_event.dialog_elements
api.HTMLElement.toggle_event.dialog_elements
関連情報
- このインターフェイスを実装している HTML 要素:
<dialog>