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="manual"
popover 属性には "auto" または "manual" を指定することができます。何も指定しない場合は "auto" と見なされます。"manual" を指定すると下記の動作が変わります。
- ポップオーバー以外のコンテンツが非活性化されない。クリックや選択できる。
- ポップオーバー以外の箇所をクリックしても ESC を押してもポップオーバーは閉じない。
- 一度に複数のポップオーバーを表示できる。
下記にサンプルを示します。[Pop] ボタンをもう一度押すことでポップオーバーを閉じることができます。
HTML
<button popovertarget="pop3">Pop</button> <dialog id="pop3" popover="manual"> This is a 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