くまだどうも、くまだです。
JavaScriptなしでポップアップ（ポップオーバー）を実装するメモ。
popover属性
popover属性はいわゆるモーダルのようなポップアップを画面に表示させる属勢です。
コードは以下になります。
<div class="container">
<div id="popover" popover class="popover">
<p>コンテンツ</p>
</div>
<button popovertarget="popover" class="popupButtonn">ボタン</button>
</div>
.container {
display: flex;
justify-content: center;
gap: 10px;
height: 100vh;
}
.popupButtonn {
align-self: center;
background-color: orange;
padding: 10px;
}
.popover {
background-color: #222;
color: #fff;
padding: 30px;
}
See the Pen popover by kuma0605 (@kuma0605) on CodePen.
ボタンをクリックすると、ポップアップが開きます。ポップアップの外側の余白をクリックするとポップアップが閉じます。
ポップアップさせたい要素には「popover」属性を付与します。また、id属性も付与します。こちらのid属性は、後述するトリガーと紐づけるために必要になります。
<div id="popover" popover class="popover">
<p>コンテンツ</p>
</div>トリガー要素には「popovertarget」属性を付与します。popovertarget属性には、ポップアップ要素に付与したid属性と同じものを記述します。
<button popovertarget="popover" class="popupButtonn">ボタン</button>2025年現在、主要ブラウザ全てで使うことができます。
アクセシビリティ対応モーダルならMicomodalがいいかなと思います。
ここまで読んでくださりありがとうございました。