モーダルダイアログを実装するには、これまではJavaScriptで複雑なコードを書くのが一般的でした。
しかし、HTML5で登場した要素を使えば、最小限のJavaScriptだけでモーダルダイアログを作成できます。
この記事では、基本的な使い方から便利な属性、スタイリング方法までを解説します。
基本的な使い方
まずは、もっともシンプルな実装例を見てみましょう。
実行の流れ
- 1.「開く」ボタンをクリックすると、showModal()メソッドでモーダルが表示されます。
- 2.「閉じる」ボタンをクリックすると、close()メソッドで非表示になります。
上記のコードでは、ボタンをクリックするとモーダルダイアログが開き、中の「閉じる」ボタンをクリックすると閉じます。
JavaScriptのコードは最小限で済み、簡単に実装できるのが魅力です。
比較：dialogあり vs なし
| 項目 | dialogを使う | 自作モーダル |
|---|---|---|
| HTML構造 | dialogタグ1つ + コンテンツ | div + オーバーレイ + コンテンツ |
| 開閉処理 | showModal() / close() のみ | クラス追加・削除 |
| 閉じる動作 | 自動的にESCキー対応、フォーカス制御あり | ESCやフォーカス管理は自分で実装が必要 |
| 背景の暗転 | ::backdrop 疑似要素で簡単に指定可能 | 要素を自分で作成 + 管理が必要 |
| アクセシビリティ | 標準でサポート | 独自に実装が必要 |
| 自由度 | 標準挙動の範囲内で制御 | 完全に自由にカスタマイズ可能 |
| コード量（基本実装） | 約15〜20行 | 約25〜35行 |
| コード量（実用レベル） | 増えにくい | 増えやすい |
dialog要素を使った場合と使わない場合の主な特徴を比較したものです。プロジェクトの要件に合わせて、どちらが適しているかを判断する際の参考にしてください。
属性
closedby属性
closedby属性は、dialog要素の閉じる方法を細かく制御するための属性です。
この属性を使えば、誤操作で閉じてはいけない重要な確認ダイアログなども安全に設計できます。
autofocus属性
ダイアログ内の特定のボタンや入力欄に自動でフォーカスを当てたい場合に使用します。
たとえば、閉じるボタンに自動フォーカスさせたい場合は次のように書きます。
CSSでのスタイリング
dialog要素は、通常のHTML要素と同様にCSSで自由にデザインできます。
また、モーダル表示時には::backdropという疑似要素を使って背景のスタイルも変更できます。
さらに、:modal疑似クラスを利用することで、「開いている状態だけ」デザインを変えることも可能です。
対応ブラウザ
主要なモダンブラウザではすでに対応済みです。
詳細はこちらで確認できます。
まとめ
dialog要素を使うと、これまで手間のかかっていたモーダルダイアログをとてもシンプルに実装できます。
showModal()とclose()メソッドを呼び出すだけで開閉でき、ESCキー対応やフォーカス制御などの基本機能も標準で備わっています。
一方で、挙動を細かくカスタマイズしたい場合や、独自のアニメーション・デザインを重視する場合は、自作モーダルの方が自由度は高くなります。
手軽さ重視ならdialog、デザインや動きにこだわりたいなら自作モーダル。目的に合わせて上手に使い分けてみましょう。
