ポップオーバーAPIを使えばポップアップを簡単に作成可能

ポップオーバーAPIとは

ポップオーバーAPIはポップオーバーコンテンツを表示するため仕組みです。

作成方法はクリックするボタンかリンクにpopovertarget属性を付けてidを指定して、ポップオーバーコンテンツにidとpopover属性を付けるだけです。

popover属性が付いてる部分は自動的に画面中央に表示されて黒のborderが付きます。

従来はこのようなポップアップを作成するにはHTMLだけでなくCSSかJavaScriptが必須でしたが、ポップオーバーAPIを使えばHTMLだけで済みます。

<button popovertarget="pop">ポップオーバー表示</button>
<div id="pop" popover>ポップオーバーコンテンツ</div>

※ ボタンが黒いのはWordPressのCSSが適用されているため。

しかし、CSSによる装飾なしだと見た目が悪いので実際はCSSも必要になることが多いです。

モーダルの代わりにはならない

一般的にモーダルの場合は以下の例のように表示するときにrgba(0, 0, 0, 0.4)などの背景色を全体に表示させることが多いです。

ポップオーバーAPIはpopover属性が付いた部分が表示されて、popover属性が付いていない部分をクリックすると非表示になるという特性上、モーダル作成に使用するのには適さないです。

閉じるボタン追加する方法

ポップオーバーコンテンツ内に閉じるボタンを追加したい場合は、閉じるボタンにpopovertarget="popover"を付けるだけです。

<button popovertarget="popover">ポップオーバー表示</button>
<div id="popover" popover class="popover-content">
  <p>サンプルです</p>
  <p><button popovertarget="popover">閉じる</button></p>
</div>

ポップオーバーAPI 閉じるボタンサンプル

JavaScriptでボタンが押された際に非表示にしたい場合はpopover属性の付いた要素のidをhidePopover()で非表示にします。

<button popovertarget="popover">ポップオーバー表示</button>
<div id="popover" popover class="popover-content">
  <p>サンプルです</p>
  <p><button id="close">閉じる</button></p>
</div>

const close = document.getElementById('close')
const popover = document.getElementById('popover')
close.addEventListener('click', () => {
  popover.hidePopover()
})

ポップオーバーAPI JavaScriptで閉じるボタンサンプル

SafariとFirefoxは利用不可

Chromeは2023年5月31日にリリースされたv114からポップオーバーAPIが利用可能になりました。

Microsoft Edgeも6月1日リリースのv114から利用可能です。

SafariとFirefoxは現在利用不可ですが、Safariは試験版では利用可能になっているので、将来のアップデートで利用可能になる可能性が高いです。

簡単にポップアップを実装できるようになるので、SafariとFirefoxでも利用可能になったら積極的に使用することをオススメします。