![MARKLEAPS[マークリープス]](https://markleaps.com/blog/wp-content/themes/mkl/images/00_logo.png){kind=logo}
近年のブラウザでは、JavaScriptを使わずにモーダルUIを実装できる「Popover API」が利用可能になっています。
この記事では、Popover APIを利用した「JavaScript不要のモーダル実装方法」を紹介します。
Popover APIとは？
Popover APIは、モーダル専用ではなく、ポップアップUI全般を扱うためのHTML機能です。popover 属性を付与するだけで、モーダル・ツールチップ・ドロップダウンなどのUIを簡単に実装できます。
従来はJavaScriptで制御する必要がありましたが、Popover APIではHTML属性のみで開閉制御が可能です。
なお、HTMLには <dialog>
dialog は確認ダイアログなど「対話」を目的とした要素で、
Popover API はツールチップ・メニュー・軽量モーダルなど幅広いポップアップUIに向いています。
JavaScript不要でモーダルを実装できる
Popover APIでは、popovertarget 属性を使用して対象要素を開閉できます。
例えば以下のコードでは、ボタンをクリックすると #modal が表示されます。
|
1 2 3 4 5 6 7 |
<button type="button" popovertarget="modal"> モーダルを開く </button> <div id="modal" popover> モーダル内容 </div> |
JavaScriptによる class 切り替えやイベント処理が不要なため、シンプルなモーダル実装に向いています。
対応ブラウザについて
Popover APIは比較的新しい機能です。
そのため、主要モダンブラウザでは利用できますが、古いブラウザでは動作しない場合があります。
業務システムなど、古いブラウザ対応が必要なケースでは注意しましょう。
必要に応じて、JavaScriptによるフォールバック実装を検討するのがおすすめです。
JavaScript不要のPopoverモーダル実装
まずは、最小構成のPopoverモーダルを紹介します。
HTMLだけでモーダルの開閉が可能です。
サンプルコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<button type="button" popovertarget="modal"> モーダルを開く </button> <div id="modal" popover> <h2>モーダルタイトル</h2> <p>モーダルの中身</p> <button type="button" popovertarget="modal" popovertargetaction="hide"> 閉じる </button> </div> |
Codepenデモ
See the Pen JavaScript不要のPopoverモーダル by mkl may (@mkl-may) on CodePen.
コード解説
popover 属性を付与した要素が、Popover本体になります。
|
1 |
<div id="modal" popover> |
popovertarget 属性には、開閉対象の id を指定します。
|
1 |
<button type="button" popovertarget="modal"> |
また、popovertargetaction="hide" を指定すると、Popoverを閉じるボタンとして機能します。
|
1 2 3 4 |
<button type="button" popovertarget="modal" popovertargetaction="hide"> |
JavaScript不要のPopoverモーダル＋CSS装飾
続いて、背景オーバーレイやアニメーションを追加した実践的なサンプルを紹介します。
Popover APIとCSSを組み合わせることで、実用的なモーダルUIを作成できます。
なお、CSSコード量が多くなるため、詳細はCodePenをご覧ください。
サンプルコード（HTML）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<button type="button" popovertarget="modal"> モーダルを開く </button> <div id="modal" popover> <div class="modal_inner"> <h2>モーダルタイトル</h2> <p>モーダルの中身</p> <button type="button" popovertarget="modal" popovertargetaction="hide"> 閉じる </button> </div> </div> |
Codepenデモ
See the Pen JavaScript不要のPopoverモーダル＋CSS装飾 by mkl may (@mkl-may) on CodePen.
HTML解説
モーダル本体を .modal_inner で囲むことで、背景オーバーレイとコンテンツ部分を分離しています。
|
1 |
<div class="modal_inner"> |
これにより、背景だけ暗くしつつ、中央にモーダルを配置できます。
CSS解説
Popover本体には position: fixed; を指定し、画面全体を覆うようにしています。
|
1 2 3 4 5 |
#modal { position: fixed; inset: 0; height: 100dvh; } |
100dvh は「画面全体の高さ」を表す単位です。
スマホブラウザのアドレスバー変動にも対応しやすいため、近年よく利用されています。
また、:popover-open 疑似クラスを使用すると、「開いている時だけ」のスタイルを適用できます。
|
1 2 3 |
#modal:popover-open { display: grid; } |
Popover APIでは、この疑似クラスを使うことで開閉状態に応じたCSS制御が可能です。
Popover要素は、閉じている間はブラウザ側で自動的に非表示になります。
そのため、通常のモーダル実装のように JavaScript で class を切り替えたり、display: none; を管理したりする必要がありません。
Popoverモーダル実装時の注意点
古いブラウザでは利用できない
Popover APIは比較的新しいHTML機能です。
そのため、古いブラウザや古いWebView環境では正常に動作しない場合があります。
特に企業向けシステムやタブレット端末などでは、事前に対応ブラウザを確認しておきましょう。
複雑な制御にはJavaScriptが必要
シンプルなモーダル表示であればPopover APIだけで十分ですが、以下のようなケースではJavaScriptが必要になる場合があります。
- モーダル表示時に非同期通信を行う
- 表示内容を動的に変更する
- 複数モーダルを高度に制御する
- 独自のフォーカス制御を細かく行う
用途に応じて、Popover APIとJavaScriptを使い分けるのがおすすめです。
まとめ
Popover APIを使うことで、JavaScript不要でモーダルを実装できます。
HTML属性だけで開閉できるため、コード量を減らしながらシンプルに実装できるのが大きなメリットです。
また、CSSと組み合わせることで、背景オーバーレイやアニメーション付きの実践的なモーダルUIも作成できます。
ただし、比較的新しい機能のため、古いブラウザへの対応が必要な場合は注意しましょう。