2024年2月時点でPopover APIがFirefox以外のブラウザに対応しHTMLのみでポップオーバーコンテンツが表示されるようになりました。
ポップオーバーコンテンツとは
ポップオーバー要素は、呼び出し／制御要素（すなわち または に popovertarget 属性が付いたもの）、または HTMLElement.showPopover() の呼び出しによって開かれるまで、display: none で非表示になっています。
開かれると、ポップオーバー要素は、最上位レイヤー内の他のすべての要素の上に現れ、親要素の position や overflow のスタイル付けの影響を受けません。
つまりCSSのz-indexを指定せずともコンテンツの上位に表示されるという仕様のようです。
簡単なデモを作成してみました、JavaScriptを書かずともモーダルのようなものが表示されます。
See the Pen Untitled by Makoto Ogata (@makoto-ogata) on CodePen.
簡単にできるといってもPopover APIを使ってdivタグをモーダルの様に見せるのはあまりよろしくなく、その場合はdialogタグを使うほうが良いとされています。
モーダルと非モーダル
Mdnによりますと、こう書かれています。
- モーダルというのは、ポップオーバーが示されている間、ページの残りの部分は、ポップオーバーが何らかのアクションを起こすまで（例えば、重要な選択がなされるまで）、反応しないようにレンダリングされるということです。
- 非モーダルというのは、ポップオーバーが表示されている間も、ページの残りの部分が反応するようにするということです。
Popover APIは非モーダルで、dialogタグはモーダルです。
モーダルダイアログはユーザーを遮って何かしらの行動を要求するものである。これはユーザーの注意を重要な情報に向けてもらうことが必要な場合には適している。
記事最後の参考にした記事「モーダルと非モーダルダイアログ：用いるべき場合とそうでない場合」のサブタイトルにもなっています。
つまり非モーダルである以上、モーダルウィンドウとして実装するのはあまりおすすめはしないという事です。
- ただDialogとPopover APIを併用はできる
- もちろん内容にもよる
では用途としてはどんな事に使えるのか？
トースト通知であったりコンテンツピッカーなどで使うと良いとされています。
CodePenなどで「Popover API」と検索するとサイドメニューの開閉などに使われていて、アイデアによっては様々な箇所で使われそうですね。
参考