popover - ポップオーバー
属性
<tagName popover> - ポップオーバー
サポート状況
https://caniuse.com/mdn-api_htmlelement_popover説明
popover を指定したコンテンツをポップオーバーとして表示します。ポップオーバーは次のような動作となります。
- ページを開いた時点ではポップオーバーは非可視化される。
- <button> または <input> をクリックすると popovertarget で指定したポップオーバーが開く。
- ポップオーバーは画面の中央に、z-index の値に関わらず最前面に表示される。
- ポップオーバーは常にひとつのみ表示され、新しいポップオーバーが開くと古いポップオーバーは閉じられる。
- ポップオーバーが表示されると、他のコンテンツは不活性化され、ボタンクリックや選択ができなくなる。
- ポップオーバー以外のコンテンツをクリックしたり ESC キーを押すとポップオーバーが閉じる。
- :popover-open でポップオーバーのスタイルを指定できる。
- ::backdrop でポップオーバー以外のスタイルを指定できる。
基本的なサンプル
下記に簡単なサンプルを示します。
CSS
*:popover-open {
padding: 1rem;
border: 1px solid #ccc;
box-shadow: 5px 5px 10px 0px #999;
text-align: center;
}
*::backdrop {
background-color: rgba(0, 0, 0, 0.3);
}
HTML
<button popovertarget="pop1">Pop</button> <dialog id="pop1" popover> This is a sample dialog. </dialog>
表示
popovertargetaction="toggle", "show", "hide"
popovertargetaction には "toggle", "show" または "hide" を指定することができます。何も指定しない場合は "toggle" となり、ボタンを押すたびにポップオーバーの表示と非表示をトグルします。"show" はポップオーバーを表示します。"hide" はポップオーバーを閉じます。
HTML
<button popovertarget="pop2" popovertargetaction="show">Pop</button> <dialog id="pop2" popover> This is a sample dialog.<br><br> <button popovertarget="pop2" popovertargetaction="hide">Close</button> </dialog>
表示
popover="auto", "manual", "hint"
popover 属性には下記の値を指定することができます。デフォルトは auto です。Chrome 133 で hint がサポートされました。
- auto
- 開くときに他の auto や hint ポップオーバーを閉じます。ポップオーバー以外の箇所をクリックしたり ESC キーを押すとポップオーバーが閉じます。
- manual
- 開くときに他のポップオーバーを閉じません。ポップオーバー以外の箇所をクリックしたり ESC キーを押すしてもポップオーバーは閉じません。ボタンを再度押すと閉じます。
- hint
- 開くときに他の hint ポップオーバーを閉じます。ポップオーバー以外の箇所をクリックしたり ESC キーを押すとポップオーバーが閉じます。選択肢を auto ポップオーバーで開いている時に、選択肢の説明を hint ポップオーバーで表示したりする際に有効です。Chrome 133 でサポートされました。(サポート状況(↗))
下記にサンプルを示します。
HTML
<button popovertarget="pop3-auto">auto</button> <dialog id="pop3-auto" popover="auto" style="transform: translateY(-30px);"> This is a "auto" sample dialog. </dialog> <button popovertarget="pop3-manual">manual</button> <dialog id="pop3-manual" popover="manual"> This is a "manual" sample dialog. </dialog> <button popovertarget="pop3-hint">hint</button> <dialog id="pop3-hint" popover="hint" style="transform: translateY(30px);"> This is a "hint" sample dialog. </dialog>
表示
showPopover(), hidePopover()
JavaScript の showPopover(), hidePopover() でポップオーバーを制御することもできます。ダイアログを除くメインコンテンツの inert 属性を制御することで popover="manual" の場合でもポップオーバー以外のメインコンテンツを非活性化することができます。
HTML
<body>
<div id="main">
<!-- メインコンテンツ -->
<button id="btn-open">Pop</button>
<!-- メインコンテンツ -->
</div>
<dialog id="pop4" popover="manual">
This is a sample dialog.<br><br>
<button id="btn-close">Close</button>
</dialog>
<script>
document.getElementById("btn-open").addEventListener("click", () => {
document.getElementById("main").inert = true;
document.getElementById("pop4").showPopover();
});
document.getElementById("btn-close").addEventListener("click", () => {
document.getElementById("main").inert = false;
document.getElementById("pop4").hidePopover();
});
</script>
</body>
HTML