皆さん、こんにちは。
制作部の関です。
今回は「ポップオーバー API 」についてのお話をします。
この方法ならjavascriptなしで簡単にポップアップさせることができます！
ポップオーバー API
・buttonタグにの「popovertarget」にポップアップさせたい要素のid名の”my-popover”を設定。
・ポップアップさせる要素にid名”my-popover”を設定と「popover」を設定
・ポップアップさせたい要素内にcloseボタンを設置。buttonタグに「popovertarget=”my-popover” popovertargetaction=”hide」を設定。
・あとは<div id=”my-popover” popover>ポップアップさせたい要素</div>にポップアップさせたい要素を入れるだけです！！
See the Pen
popover by seki (@separth10)
on CodePen.
とても手軽にポップアップを作ることができます！
モーダルウインドウじゃないポップアップを作りたいときに重宝しますね！
以上、制作部の関でした。