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

<button popovertarget="popover">ポップオーバー表示</button>

<div id="popover" popover class="popover-content">
  <p>サンプルです</p>
  <p><button id="close">閉じる</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;
}

const close = document.getElementById('close')
const popover = document.getElementById('popover')
close.addEventListener('click', () => {
  popover.hidePopover()
})

元記事を表示する