Popover APIで背景の要素をクリックできないようにする方法

HTMLのPopover APIを使うと、JavaScriptを使わずにHTMLのみでポップオーバーを実装できます。また、CSSの::background疑似要素を利用することでポップオーバーの背景を暗くしたりぼかしをかけたりできます。

しかし、MDNで次のように説明されているとおり、ポップオーバーを表示しているときでもポップオーバー以外の部分はクリック可能な状態になっています。

  • モーダルというのは、ポップオーバーが示されている間、ページの残りの部分は、ポップオーバーが何らかのアクションを起こすまで(例えば、重要な選択がなされるまで)、反応しないようにレンダリングされるということです。
  • 非モーダルというのは、ポップオーバーが表示されている間も、ページの残りの部分が反応するようにするということです。

ポップオーバー API を使用して作成されたポップオーバーは常に非モーダルです。

——『ポップオーバー API - Web API | MDN

つまり、::background疑似要素をクリックすることでポップオーバーを非表示にできますが、このときに疑似要素の下にある要素にクリックが「貫通」してしまうということです。

これを防ぐには、次のようなCSSを適用します。

body:has([popover]:popover-open) {
pointer-events: none;
}
[popover]:popover-open {
pointer-events: auto;
}

:popover-open疑似要素を活用することで、ポップオーバー要素が表示されているときにのみスタイルを適用できます。

この特性を利用して、ポップオーバーが表示されているときにはbody要素をクリック不可に設定し、ポップオーバー要素内はクリックできるようにします。

また、user-selectプロパティを使うことで、ポップオーバーが表示されているときにテキスト選択を無効にすることもできます。

body:has([popover]:popover-open) {
pointer-events: none;
user-select: none;
}
[popover]:popover-open {
pointer-events: auto;
user-select: text;
}
#HTML#JavaScript#Web開発#プログラミング
Xに共有する Blueskyに共有する Misskeyに共有する LINEに共有する Threadsに共有する

おすすめアイテム

※このリンクを経由して商品を購入すると、当サイトの運営者が報酬を得ることがあります。詳細はこちら

著者のアイコン画像

生まれた時から、母国語よりも先にJavaScriptを使っていました。ネットの海のどこにもいなくてどこにでもいます。

Webフロントエンドプログラマーで、テクノロジーに関する話題を追いかけています。動画編集やプログラミングが趣味で、たまにデザインなどもやっています。主にTypeScriptを使用したWebフロントエンド開発を専門とし、便利で実用的なブラウザー拡張機能を作成しています。また、個人ブログを通じて、IT関連のニュースやハウツー、技術的なプログラミング情報を発信しています。