HTML要素 ・ その他
<dialog>
ダイアログ
確認メッセージやモーダルウィンドウなど、ページの上に重ねて表示するダイアログを作る要素です。
01
サンプルコード
HTML
1<dialog open>
2 <p>カートに商品を追加しました。</p>
3 <form method="dialog">
4 <button>閉じる</button>
5 </form>
6</dialog>
CSS
1dialog {
2 position: static;
3 padding: 16px 20px;
4 border: 1px solid #ccc;
5 border-radius: 8px;
6 box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
7}
02
実行結果
ブラウザでの表示プレビューでは open 属性で表示した状態を示しています
03
解説
dialog はダイアログボックスを表す要素です。open 属性があると表示され、ないと非表示になります。
JavaScriptの showModal() で開くと、背景が操作できなくなる「モーダル」として表示されます。Escキーで閉じられ、フォーカスの管理もブラウザが行ってくれます。
中に form method="dialog" を置くと、そのフォームのボタンを押したときにダイアログが閉じます。
04
応用例・注意点
よく使うメソッド・CSS
| 名前 | 説明 |
|---|---|
showModal() | モーダルとして開く（背景を操作不可に） |
show() | モーダルではなく開く |
close() | 閉じる |
::backdrop | モーダルの背景（暗い幕）を装飾する |
ボタンでモーダルを開く
showModal() で開くと、背景に ::backdrop の幕が表示されます。
HTML
1<button onclick="dlg.showModal()">開く</button>
2<dialog id="dlg">
3 <p>本当に削除しますか？</p>
4 <form method="dialog"><button>キャンセル</button></form>
5</dialog>
CSS
1dialog::backdrop {
2 background: rgba(0, 0, 0, .5);
3}
注意点
- 01モーダルを開くときは open 属性ではなく showModal() を使います。
- 02ダイアログには閉じる手段を必ず用意します。