某天，我在努力写bug的过程中，收到了来自合作的同事发来的打招呼🙋
一开始，第一反应，html5倒是有dialog，但是也需要执行点击操作才行哇。
后面过了几天，忽然想起来，有个popover属性哇，可以满足那个小伙伴的场景哇
❓Popover是个什么玩意儿
popover就是可以把元素变成弹出框的一个属性。（PS：还进行需要id关联）
<button popovertarget="mypopover">出现/隐藏弹出框</button>
<div id="mypopover" popover>弹出框内容</div>
点击按钮会在出现和隐藏两个状态进行切换，点击空白区域会隐藏弹出框。此外还支持ESC键进行关闭弹窗。
设置了popover属性的元素，默认是display:none;，弹出时被放入顶层（Toplayer），位于所有其他页面内容的顶部。
如果想单独控制出现或者隐藏，可以通过
popovertargetaction属性（show、hide、toggle，toggle是默认值）。
<button popovertarget="mypopover" popovertargetaction="show">出现弹出框</button>
<button popovertarget="mypopover" popovertargetaction="hide">隐藏弹出框</button>
<div id="mypopover" popover>弹出框内容</div>
popover有哪些值
auto和manual
默认值是"auto"，可以“轻微关闭”（即点击空白/ESC键关闭）。
popover="manual"是手动弹出，按钮的显示/隐藏/切换按钮仍然有效，但弹出窗口不能“轻微关闭”
其他
特有的样式
popover有一些对应的CSS，可以调整。
对所有的弹出框可以通过属性选择器[popover]进行选择调整，也可以通过伪类:popover-open来进行调整。
伪元素::backdrop是，弹出框元素后面的全屏元素，可以对弹出框后面的页面内容添加效果。
<!-- html -->
<button popovertarget="mypopover">出现/隐藏弹出框</button>
<div id="mypopover" popover>弹出框内容</div>
<!-- css -->
body {
background: url('./pic.jpg') no-repeat center / cover;
min-height: 100vh;
}
:popover-open {
width: 200px;
height: 100px;
position: absolute;
inset: unset;
top: 5px;
right: 5px;
margin: 0;
}
::backdrop {
backdrop-filter: blur(3px);
}
