👵
40秒でdialog要素を理解しな
と言われても無理なのでdialog要素でできることをなんとなく理解できるようにデモをつくってみました。
まずはデモ
興味ある方は以降の解説を読んでみてください。
デモについて
1) 非モーダル表示（show()）
-
使っているメソッド:
HTMLDialogElement.show() - 特徴: ダイアログを非モーダルで開きます。開いていても背景は操作可能（クリックやフォーカスが通る）。
-
仕組み: ダイアログが
open状態になっても背景は inert にならず、通常通り操作できる。
2) モーダル表示（showModal() + 背景クリックで閉じる）
-
使っているメソッド:
HTMLDialogElement.showModal() -
特徴: モーダルで開くと、背景は自動的に
inert状態になり操作できなくなる。 -
仕組み: 背景クリックを検知して
@clickハンドラでe.target === dialogを確認し、close()を呼び出して閉じる。 -
補足: ESCキーでも閉じられる（
cancelイベントが発火）。
2.2) モーダル表示（背景クリックでは閉じない）
-
使っているメソッド:
showModal() - 特徴: モーダル中でも背景クリックでは閉じない挙動を作る。
-
仕組み:
@clickを無視し、ESCキー入力時のcancelイベントのみでclose()。 - 利用シーン: 誤操作防止や重要な確認ダイアログ。
2.3) 内部スクロールと背景ロック
-
使っている特性:
- モーダル表示中は背景操作不可（
showModal()の標準挙動） - CSS で
.scrollbox { max-height: 80dvh; overflow:auto; }により内部のみスクロール
- モーダル表示中は背景操作不可（
-
特徴: コンテンツが長いとき、背景を固定しつつ内部スクロールを許可。
-
仕組み: 背景ロックは「モーダルが開いている間だけ
html.lock { overflow:hidden }」で実装。 -
検証:
window.scrollYを監視し、モーダル中に背景が動かないか確認できる。
3) returnValue の利用
-
使っているAPI:
dialog.returnValue -
特徴:
close(value)の引数や<form method="dialog">で押されたボタンのvalueが自動で格納される。 -
仕組み: ダイアログの
@closeでreturnValueを取得して処理を分岐。 - 利用例: Yes/No 確認、テーマ選択、破棄/保存の分岐。
4) 未保存ガード（requestClose() と cancel）
-
使っているAPI:
-
特徴: 閉じる前に「本当に閉じてよいか」を確認できる。
-
仕組み:
- ユーザー操作で
requestClose()を呼ぶ -
cancelイベントでpreventDefault()すれば閉じるのを止められる - 確認ダイアログを出して Yes/No を選ばせる
- ユーザー操作で
5) アクセシビリティ最小構成
-
使っている属性:
-
aria-labelledby— 見出しとダイアログを紐付け -
aria-describedby— 説明文と紐付け -
autofocus— 最初に操作すべき要素へ自動フォーカス
-
-
特徴: スクリーンリーダー利用者にも理解しやすく、かつキーボード操作の流れを確保。
-
仕組み: ダイアログを開いたときに初期フォーカスを設定、閉じたら元のトリガーにフォーカスを戻す。
参考文献
- HTML Standard — The
<dialog>element - MDN Web Docs —
<dialog>/HTMLDialogElement/showModal()/close()/requestClose()/cancelevent /::backdrop/overflow
Discussion