今回は、全ブラウザ実装可能になった Popover APIのpopover属性、popovertarget属性、popovertargetaction属性でモーダルウィンドウを作成する方法を紹介します。

Popover APIとは

Popover APIは、JavaScriptを使うことなくWebサイトやアプリに小さな情報ウィンドウを実装できる便利な機能です。

特定のボタンやリンクをクリックしたときに、ポップアップのように詳細な情報や追加の操作ができるウィンドウを表示することができます。

Chrome 114からPopover APIがサポートされたことにより、popover属性、popovertarget属性、popovertargetaction属性の3つの属性が新たに追加され、それらの属性をHTMLタグに記述することで使用が可能になります。

まずは、CSS調整なし、HTMLだけの状態です。下記の「表示する」ボタンをクリックしてみてください！

すでにJavaScriptを使用せずに、モーダルウィンドウの状態ができていますね！

設定方法

簡単なモーダルウィンドウを表示させるには以下の設定が必要です。

• 表示切替を行うbuttonタグにpopovertarget属性を記述。値は任意のもので構いません。
• 表示させたいコンテンツにpopover属性を記述。また、同じ場所にpopovertarget属性と同じ値のidを設定する

  ※idの値と表示切替を行うbuttonタグに設定したpopovertarget属性の値は必ず同じ値にしてください（popovertargetで指定したidのコンテンツがポップオーバーとして表示されます。）

<button popovertarget="modal">表示する</button>

<div popover id="modal">

モーダルウィンドウのコンテンツです.

popover属性、popovertarget属性、popovertargetaction属性とは？　どこに記述する？

• popover属性：表示したいコンテンツ（ポップオーバー要素）であることを示すための属性。表示したいコンテンツに記述する。
• popovertarget属性：表示したいコンテンツ（ポップオーバー要素）とボタンとを関連付けるための属性。表示したいコンテンツを展開するbuttonタグに記述
• popovertargetaction属性：ボタンを押した時の動作を指定する属性。表示したいコンテンツを展開するbuttonタグに記述。show、hide、toggle、のアクション（値）を指定できる

popover属性で使用できる属性値

• auto：初期値。ポップオーバーの外側をクリックするか、ESCキーを押すとポップオーバーが閉じる
• manual：ESCキーで閉じる、ポップオーバーの外側をクリックすると閉じるといった機能がオフになる。

popovertargetaction属性で使用できる属性値

• toggle：既定値。ボタンを押すごとに、ポップオーバー要素の表示・非表示が切り替わる。
• hide：ボタンを押すと、表示されているポップオーバー要素が非表示になる。
• show：ボタンを押すと、非表示のポップオーバー要素が表示される。

次回は、上記のモーダルウィンドウをCSSで調整する方法を紹介します。