ネイティブ <dialog> モーダル
<dialog> 要素 + showModal() メソッドで実装するネイティブモーダル。トップレイヤー描画・focus trap・Escape キー閉じ・backdrop 装飾まで標準実装。
解説
「利用規約を表示」ボタンで開くこのモーダルは、HTML 標準の dialog 要素を使ったネイティブ実装です。開くときは JavaScript で showModal() を呼ぶだけ。これだけで背後のコンテンツが操作不能になり、フォーカスがダイアログ内に閉じ込められ、Escape キーで閉じられる、といったモーダルに必要な挙動をブラウザが自動で備えてくれます。閉じるボタンは form method="dialog" の送信で完結するため、追加のクリック処理が不要です。
利用規約や確認ダイアログ、フォーム入力のサブウィンドウなど、一時的にユーザーの注意を一点に集めたい場面に向きます。背景は ::backdrop 擬似要素にぼかしと半透明を当てて、奥行きのある見た目にしています。自前でオーバーレイやフォーカス管理を組むと手間がかかりますが、dialog なら標準機能でアクセシブルなモーダルが手に入ります。
カスタマイズと注意点
- 背景の暗さやぼかしは
::backdropの値で調整します。 - 開くときのアニメーションは
[open]状態に当てた@keyframesで変えられます。 - キーボードのみの利用者でも操作しやすいよう、フォーカスが戻る位置などを確認しておくと親切です。
dialogは主要なブラウザで広く使えますが、ごく古い環境向けには表示の代替を考えておくと安心です。
使用例・適したシーン
- 利用規約・プライバシーポリシー表示
- 画像拡大表示
- 確認ダイアログ
よくある質問
フォーカス管理や背景の操作禁止は自分で実装しますか？
不要です。showModal() で開いた dialog は、背後のコンテンツを操作不能にし、フォーカスをダイアログ内に閉じ込め、Escape キーで閉じる挙動をブラウザが標準で備えています。アクセシブルなモーダルを少ないコードで作れます。
閉じるボタンはどう作っていますか？
ダイアログ内に form method=dialog を置き、その中のボタンを押すとフォーム送信としてダイアログが閉じます。閉じる専用の JavaScript を書かなくてよいのが利点です。背景クリックで閉じたい場合は別途処理を足します。