如何检查 html 弹出窗口是否打开？

Question

使用新的 popover API，有没有办法使用 JavaScript 检查弹出窗口当前是否打开？

<button popovertarget="pop">Trigger the popover</button>
<div popover id="pop">This is the popover!</div>

Answer 1

目前没有专用的 JavaScript API 来检查弹出窗口的状态。然而，

matches

方法可以与

:popover-open

CSS伪选择器结合使用来达到相同的结果：

const popover = document.querySelector('#pop');
const isOpen = popover.matches(':popover-open');

<button popovertarget="pop">Trigger the popover</button>
<div popover id="pop">This is the popover!</div>