概要: このチュートリアルでは、JavaScript ポーパ API を使用して、Web ページの他の要素の上にポーパコンテンツを表示する方法を学びます。
JavaScript ポーパ API の紹介
ポーパ API は、他のページ要素の上にポーパコンテンツを表示するための標準的な方法です。ポーパコンテンツを制御するには 2 つの方法があります
- HTML 属性を宣言します。
- JavaScript を使用します。
宣言的ポーパ
HTML 要素からポーパコンテンツを作成するには、popover 属性と id 属性を追加します
<div id="popover" popover>This is a popover</div>Code language: JavaScript (javascript)この構文では
popover属性はdisplayプロパティを暗黙的にnoneに設定します。これにより、ページが読み込まれたときに要素が非表示になります。idは、ボタンなどのコントロールにポーパ要素を関連付けるために使用されます。
ポーパの表示または非表示を切り替えるには、button または input（タイプ button）である別の要素が必要です。さらに、ボタンの popovertarget 属性をポーパの id に設定する必要があります。たとえば
<div id="popover" popover>This is a popover</div>
<button popovertarget="popover">Show/Hide the popover</button>Code language: JavaScript (javascript)ボタンをクリックするとポーパが表示され、もう一度クリックするとポーパが非表示になります。ポーパのデフォルトの動作は トグル です
ボタンの popovertargetaction 属性を hide、show、または toggle に設定することで、ポーパ要素の動作を変更できます。たとえば
<div id="popover" popover>This is a popover</div>
<button popovertarget="popover" popovertargetaction="show">Show popover</button>
<button popovertarget="popover" popovertargetaction="hide">Hide popover</button>Code language: HTML, XML (xml)popovertargetaction 属性を指定しない場合、デフォルト値は toggle であり、ボタンを繰り返しクリックするとポーパ要素が表示および非表示になります。
ポーパの状態
HTML 要素に popover 属性を追加すると、その状態はデフォルトで auto になります。次のコードスニペットは同等で同じ効果があることを意味します
<div id="popover" popover>This is a popover</div>Code language: JavaScript (javascript)および
<div id="popover" popover="auto">This is a popover</div>Code language: JavaScript (javascript)ポーパが auto 状態の場合、次のように動作します
- ポーパ要素の外部をクリックすると非表示になります。これは「軽く非表示」と呼ばれます。
ESCキーを押してもポーパが非表示になります。- 一度に表示できるポーパは 1 つだけで、2 番目のポーパを表示すると最初のポーパが非表示になります。
auto 状態のポーパは、一度に 1 つのポーパを表示する場合に役立ちます。たとえば、API 呼び出しの結果を示すメッセージを表示する場合などです。
ポーパには manual という別の状態があります。次の操作でポーパ要素に manual 状態を設定します
<div id="popover" popover="manual">This is a popover</div>Code language: HTML, XML (xml)この manual 状態では
- ポーパは「軽く非表示」できません。
- 複数の独立したポーパを一度に表示できます。
次のページでは、2 つのポーパを同時に表示する方法を示しています
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Popover</title>
<style>
:popover-open {
position: absolute;
inset: unset;
top: 50px;
}
#popover1 {
left: 10px;
}
#popover2 {
left: 150px;
}
</style>
</head>
<body>
<button type="button" popovertarget="popover1">Toggle popover 1</button>
<button type="button" popovertarget="popover2">Toggle popover 2</button>
<div id="popover1" popover="manual">This is popover 1</div>
<div id="popover2" popover="manual">This is popover 2</div>
</body>
</html>Code language: HTML, XML (xml)JavaScript を使用してポーパを制御する
Web ブラウザがポーパ API をサポートしているかどうかを確認するには、次のように HtmlElement の popover 属性を使用できます
const isPopoverSupported = () => HTMLElement.prototype.hasOwnProperty("popover");Code language: JavaScript (javascript)HtmlElement オブジェクトには、ポーパを制御する次のメソッドがあります
| ポーパメソッド | 説明 |
|---|---|
showPopover() | ポーパを表示します |
hidePopover() | ポーパを非表示にします |
togglePopover() | ポーパを切り替えます |
次のページでは、h キーボードを押して JavaScript でポーパを切り替える方法を示しています
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JavaScript Popover API example</title>
<style>
:popover-open {
position: absolute;
inset: unset;
top: 5px;
right: 5px;
}
@media all and (max-width: 450px) {
:popover-open {
left: 5px;
}
}
</style>
</head>
<body>
<p>Press the letter <strong>h</strong> to toggle the popover.</p>
<div id="message" popover>This is a popover</div>
<script>
const isPopoverSupported = () => HTMLElement.prototype.hasOwnProperty("popover");
if (isPopoverSupported()) {
document.addEventListener("keydown", (event) => {
if (event.key === "h") {
message.togglePopover();
}
});
}
</script>
</body>
</html>Code language: HTML, XML (xml)仕組み
最初に、id message と属性 popover を持つポーパ要素を宣言します
<div id="message" popover>This is a popover</div>Code language: HTML, XML (xml)第二に、Popover APIがサポートされている場合にtrueを返す矢印関数を定義します。
const isPopoverSupported = () => HTMLElement.prototype.hasOwnProperty("popover");Code language: JavaScript (javascript)第三に、Popover APIがサポートされているかどうかを確認します。
if (isPopoverSupported()) {Code language: JavaScript (javascript)最後に、ユーザーがhキーを押したときにポップオーバーを切り替えるイベントリスナーを追加します。
document.addEventListener("keydown", (event) => {
if (event.key === "h") {
message.togglePopover();
}
});Code language: JavaScript (javascript)Popover CSS
サンプルページは、ポップオーバーを画面の右上に表示します。これは、使用するCSSクラスによるものです。
ポップオーバーが表示されると、:popover-open擬似クラスが適用され、これを使用してポップオーバー要素のスタイルを設定できます。
さらに、ポップオーバー要素の直後にあるフルスクリーン要素である::backdrop擬似要素を使用できます。これにより、ポップオーバーの背後にあるページコンテンツに効果を追加できます。
次のページは、::backdrop擬似要素を使用して背景をぼかす方法を示します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JavaScript Popover API background example</title>
<style>
body {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%3Crect%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22black%22/%3E%3Crect%20x%3D%2210%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22white%22/%3E%3Crect%20y%3D%2210%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22white%22/%3E%3Crect%20x%3D%2210%22%20y%3D%2210%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22black%22/%3E%3C/svg%3E");
background-repeat: repeat;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
line-height: 1.8;
}
button {
margin: 5px 0 0 5px;
}
:popover-open {
width: 300px;
height: 200px;
padding: 0 10px;
border-radius: 10px;
}
::backdrop {
backdrop-filter: blur(3px);
}
</style>
</head>
<body>
<button popovertarget="message" popovertargetaction="show">
Show popover
</button>
<div id="message" popover>
<h2>Popover heading</h2>
<p>
This is a popover with a blur page content.
</p>
</div>
</body>
</html>Code language: HTML, XML (xml)要約
- 要素に
popover属性を追加して、ポップオーバーにします。 popovertarget属性を使用して、target poppover要素のtoggle、show、hideなどのアクションを定義します。popovertargetを使用して、ボタンなどのコントロール要素のポップオーバー要素のIDを指定します。showPopover()、hidePopover()、togglePopover()メソッドを使用して、ポップオーバーを表示、非表示、切り替えます。
