標準のモーダル
<dialog>
暗幕・Esc で閉じる・キーボード操作の閉じ込めが最初から付いてくる。ライブラリが要らなくなった代表例。
AIへの頼み方
確認モーダルを dialog 要素と showModal() で作ってください。ライブラリは使わないでください。閉じるボタンは method="dialog" のフォームで、暗幕クリックで閉じる処理だけ自分で足してください。
動くデモ
この項目のデモは自動では動きません。操作して確かめてください。
全画面で見る ↗最小コード
<button id="open">モーダルを開く</button>
<dialog id="dlg" aria-labelledby="t">
<h2 id="t">タイトル</h2>
<p>本文</p>
<!-- method="dialog" のフォームなら、ボタンで閉じられる -->
<form method="dialog">
<button value="cancel">キャンセル</button>
<button value="ok">わかった</button>
</form>
</dialog>
<script>
// showModal() で開くと、暗幕・フォーカスの閉じ込め・Esc が標準でつく
open.addEventListener('click', () => dlg.showModal());
// 暗幕クリックで閉じるのだけは自分で書く
dlg.addEventListener('click', (e) => { if (e.target === dlg) dlg.close('cancel') });
dlg.addEventListener('close', () => console.log(dlg.returnValue));
</script>
<style>
dialog::backdrop { background: rgba(0,0,0,.45) } /* 暗幕も標準で用意されている */
</style>対応状況
定番 2026年08月時点で確認
Baseline widely available（newly 2022-03-14 / widely 2024-09-14）。
実案件でそのまま使える。自作モーダルから置き換える価値がある。
対応状況は自動更新していません。確認日より後の変化はこのページに反映されていない場合があります。
使いどころ／避けどころ
確認・入力・詳細表示など、いったん手を止めてもらう場面に向く。以前は自分で作ると面倒だった部分が、showModal() を呼ぶだけで揃う。
具体的には、背景の暗幕、後ろの内容にキーボードで到達させないこと、Escキーで閉じられること、閉じたときに元のボタンへ戻ること。この4つが標準で付いてくる。自作のモーダルでいちばん抜けやすいのが後半の3つなので、置き換える価値は大きい。
自分で足すのは暗幕をクリックしたら閉じる処理だけ。これは標準に入っていない。
避けたいのは、閉じられないモーダル。同意を強制したい気持ちで Esc を封じると、標準で得られた使いやすさを自分から捨てることになる。閉じる手段は必ず複数残す。
入れ子にすることも避ける。モーダルの上にモーダルを重ねると、どこに戻るのか分からなくなる。段階が必要なら、同じ枠の中で内容を差し替える。
show() と showModal() の違いにも注意する。show() は暗幕もフォーカスの閉じ込めも付かない。モーダルとして使うなら showModal() を選ぶ。