今回はHTMLの「Popover API」を使って
ポップアップを簡単に実装してみようと思います
Popover APIとは
2024年ころに各ブラウザで利用可能となった「popover API」
このAPIを使うと、今までJavascriptやjQueryで実装していたポップアップの開閉挙動を自動で生成してくれるようになります
JSやjQueryの実装ではだめなの？
ダメではありません。
しかし、自前でコードを書く場合にほかの要素との重なりであるz-indexを調整したり、
Escキーでポップアップを閉じる動作の実装など…
考えなければならない挙動がたくさんあります。
それらを考えなくて良いように「ライブラリ」を使うという方法もありますが
ライセンスの確認や、更新頻度の確認などまた別の心配事が発生します
「popover API」を使った場合、これらの問題は考える必要がなくなります。
「popover API」の便利なところ
先述したように、z-indexや開閉の挙動はすべてAPIが処理してくれます。
開いたポップオーバーは常に一番手前に表示されます。
ポップした要素以外の場所をクリックした場合や、Escキーを押した場合はポップオーバーを閉じます。
ポップオーバーが開いている状態で、別のポップオーバーを開く場合は
最新のポップオーバー以外は自動で閉じるようになります。
このAPIにより、ポップオーバーの制御がとてもシンプルになります
実際に動かしてみる
HTMLだけで実装した状態
See the Pen popover-01 by subaru (@subaru_works) on CodePen.
ポップを開くトリガーになる要素には popovertarget 属性で、任意の名前を指定します。
ポップ本体となる要素には popover 属性を指定し、id にトリガー要素で指定した任意の名前を設定します。
popover 属性には auto,hint,manual のいずれかを指定できるので、用途に合わせて指定することが来ます。
それぞれの挙動はこちら：https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Global_attributes/popover#%E5%80%A4
複数のポップオーバーを設定した場合
See the Pen popover-02 by subaru (@subaru_works) on CodePen.
連続でポップを開くボタンを押下すると、新しいポップオーバーのみの表示になり
前に開かれていたポップオーバーは自動で閉じられます。
スタイルを追加した場合
cssで簡単にスタイルを設定することができます。
See the Pen popover-04 by subaru (@subaru_works) on CodePen.
ポップオーバーが開いた状態では、疑似要素の「::backdrop」が生成されます。
この要素に色をしていることでポップオーバーが開いている状態を視覚的に表現することができます。
!注意!
スタイルを設定したサンプルで、ポップを開いた状態で
「ポップアップを開く」ボタンへカーソルを合わせるとhoverのスタイルが反応します。
::backdrop は色などの指定ができますが、クリックなどの動作の貫通を止めることはできません。
クリックの貫通を止める場合などはJSでの制御が追加で必要になります。
まとめ
今回は「popover API」を使った実装方法について紹介しました。
今までJSで実装していたポップアップの要素をHTMLとCSSだけで実装できるのは本当に簡単ですね。
また、全ブラウザで利用できるのもうれしいところ。
::backdropのクリック貫通については可否が分かれるところかと思いますが、こちらのみをJSで対応するか検討すれば良いだけなので、総合的にはとても便利な機能だと思いました。
皆さんもぜひ、使ってみてください