ポップオーバーAPI 閉じるボタンサンプル

<button popovertarget="popover">ポップオーバー表示</button>
<div id="popover" popover class="popover-content">
  <p>サンプルです</p>
  <p><button popovertarget="popover">閉じる</button></p>
</div>

.popover-content:popover-open {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 200px;
  border: none;
  border-radius: 10px;
  box-shadow: 0 0 5px #ccc;
}

元記事を表示する