1. ウェブ
  2. Web API
  3. ポップオーバー API
  4. ポップオーバー API の使用

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

ポップオーバー API の使用

ポップオーバー API は、他のページコンテンツの上に表示するポップオーバーのコンテンツを表示するための、標準的な、一貫性のある、柔軟な仕組みを開発者に提供します。ポップオーバーのコンテンツは、HTML 属性を用いて宣言的に、または JavaScript を用いて制御することができます。この記事では、この機能のすべてを使用するための詳細なガイドを提供します。

宣言的なポップオーバーの作成

最も単純な形では、ポップオーバーのコンテンツを含む HTML 要素に popover 属性を追加すれば、ポップオーバーが作成されます。また、ポップオーバーとそのコントロールを関連付けるために id が必要です。

html
<div id="mypopover" popover>ポップオーバーのコンテンツ</div>

メモ: 値なしで popover 属性を追加すると、 popover="auto" を設定するのと同じになります。

この属性を追加すると、display: none をその要素に設定することで、ページ読み込み時に非表示にすることができます。ポップオーバーの表示・非表示を切り替えるには、1 つ以上の制御ボタン（ポップオーバーインボーカーとも呼ばれる）を追加する必要があります。<button>（または <input> の type="button"）に popovertarget 属性を、制御するポップオーバーの ID を値として設定することすることにより、ポップオーバー制御ボタンに設定することができます。

html
<button popovertarget="mypopover">ポップオーバーを切り替え</button>
<div id="mypopover" popover>ポップオーバーのコンテンツ</div>

既定では、ボタンはトグルボタンになっています。繰り返し押すと、ポップオーバーの表示と非表示が切り替わります。

この動作を変更したい場合は、 popovertargetaction 属性を使用します - これは "hide"、"show"、"toggle" の何れかの値を取ります。例えば、表示ボタンと非表示ボタンを別個に作成するには、次のようにします。

html
<button popovertarget="mypopover" popovertargetaction="show">
  ポップオーバーを表示
</button>
<button popovertarget="mypopover" popovertargetaction="hide">
  ポップオーバーを非表示
</button>
<div id="mypopover" popover>ポップオーバーのコンテンツ</div>

基本的な宣言的ポップオーバーの例（ソース）で、上記のコード片がどのように見えるかを確認できます。

メモ: popovertargetaction 属性が省略されると、制御ボタンで実行される既定のアクションは "toggle" になります。

ポップオーバーが表示されると、display: noneが削除されて最上位レイヤーに配置され、他のすべてのページのコンテンツの上に置かれるようになります。

command と commandfor

commandfor 属性と command 属性は、popovertarget および popovertargetaction ととてもよく似た機能を提供しますが、より一般的な設計となっており、ポップオーバーコマンド以外の機能（独自のコマンドを含む）を提供することを目的としています。

前回のコードスニペットは同様に書き換え可能です。

html
<button commandfor="mypopover" command="show-popover">ポップオーバーを表示</button>
<button commandfor="mypopover" command="hide-popover">ポップオーバーを非表示</button>
<div id="mypopover" popover>ポップオーバーのコンテンツ</div>

自動状態と「簡単な解除」

上記のように、ポップオーバー要素に popover または popover="auto" が設定されている場合、その要素は自動状態 (auto state) であると言います。自動状態について注意すべき重要な動作が 2 つあります。

  • ポップオーバーは「簡単に解除する」("light dismissed") ことができます。これは、ポップオーバーの外側をクリックすることによって、ポップオーバーを閉じることができるという意味です。
  • ポップオーバーは、 Esc キーを押すなど、ブラウザー依存の仕組みを使って閉じることもできます。
  • 通常、一度に表示できる auto ポップオーバーは 1 つだけです。すでに 1 つのポップオーバーが表示されているとき に 2 つ目を表示すると、最初のポップオーバーが閉じてしまいます。このルールの例外は、入れ子のオートポップオーバーがある場合です。詳しくは、入れ子のポップオーバーの節を参照してください。

メモ: popover="auto" ポップオーバーは、文書内の他の要素で HTMLDialogElement.showModal() や Element.requestFullscreen() の呼び出しが成功した場合にも閉じます。しかし、これらのメソッドを表示されているポップオーバーに対して呼び出すと失敗することに留意してください。しかし、現在表示されていない popover 属性を持つ要素に対してこれらのメソッドを呼び出すことはできます。

自動状態は、一度に単一のポップオーバーだけを示したい場合に有益な機能です。表示したいチュートリアルの UI メッセージが複数あるが、表示が乱雑になって混乱するのを避けたい場合や、新しい状態が前回の状態を上書きするようなステータスメッセージを表示する場合などに利用できます。

上記のような動作は、複数の自動ポップオーバーの例（ソース）で実際に見ることができます。ポップオーバーを表示した後に簡単に解除してみて、同時に両方を表示しようとしたときにどうなるかを見てみましょう。

ポップオーバーのアクセシビリティ機能

ポップオーバーとその制御元（インボーカー）が popovertarget 属性で関連付けられると、API は自動的に環境に対して以下の 2 つの変更を加え、キーボード操作や支援技術 (AT) を利用するユーザーがポップオーバーに作用することができるようにします。

  • ポップオーバーが表示されると、キーボードフォーカスナビゲーション順序が更新され、ポップオーバーが次の順序になります。例えば、ボタンを押してポップオーバーを表示させる場合、ポップオーバー内のボタンはタブ順序で次になります（Tab キーを押すとフォーカスされます）。逆に、キーボード操作（通常は Esc キー）でポップオーバーを閉じると、フォーカスはインボーカーに戻ります。
  • スクリーンリーダーなどの支援技術がインボーカーとポップオーバーの関係を理解することができるようにするため、両者の間に暗黙の aria-details および aria-expanded の関係が設定されます。

この方法でポップオーバーとそのコントロール間の関係を設定すると、同時に両者の間に暗黙のアンカー参照も作成されます。詳細は