你写弹窗的时候，第一反应是不是去翻UI库文档，或者自己定义一个fixed定位的div，然后写一堆class切换和事件监听？我以前也这么干，直到上个月在后台项目里试着用了下Popover API，才觉得这两年浏览器给的惊喜真不少。
很长一段时间，HTML元素只有两种显示状态：要么隐藏，要么显示。想实现点击外部关闭、按Esc关闭、同级互斥这些效果，全得靠JavaScript去维护状态。现在不需要了。给元素加一个popover属性，它就成了一个“被浏览器接管”的弹层。
这篇文章我不讲太多理论，直接围绕一个真实后台系统里会遇到的五种弹层，给出完整可运行的代码思路。
一、先认识一下：popover 到底是个啥
最简单的用法，你只要这样写：
<button popovertarget="menu">点击我</button>
<div id="menu" popover>
这是一个能自动关闭的弹出层
</div>
点击按钮，div就会显示；点击页面其他区域，div自动隐藏。按Esc也能关。你不需要写一句JavaScript。
popovertarget这个属性放在按钮上，告诉浏览器：要控制哪个元素的显隐。popover属性放在弹层上，表示它作为弹层存在。
这背后有个暗号——当弹层元素是popover="auto"（默认值）的时候，浏览器会帮你处理这些复杂逻辑。如果你改成popover="manual"，就会变成纯手动模式，这时候只有popovertarget的按钮能控制它，外部点击不会自动关闭。
就这么一个特性，已经能做很多事了。
二、落地思路1：普通下拉菜单
后台系统右上角那个用户头像下拉菜单，是典型的popover使用场景。
<button popovertarget="user-dropdown" popovertargetaction="toggle">
<img src="avatar.png" alt="头像" width="32" height="32">
</button>
<div id="user-dropdown" popover class="dropdown">
<a href="/profile" rel="external nofollow" >个人资料</a>
<a href="/settings" rel="external nofollow" >账号设置</a>
<button onclick="doLogout()">退出登录</button>
</div>
这里用到了popovertargetaction="toggle"，意思是在显示和隐藏之间自动切换。实际点击头像，菜单就toggle一下。用户点了外面，菜单自动关，不用你费心去监听document的click。
你可能会问：菜单里的“退出登录”按钮不是还带着JavaScript吗？当然，真正提交操作肯定得靠JS，但弹层本身的开合状态已经不需要我们管理了。
而且因为popover="auto"的机制，当你打开这个菜单时，页面里如果有其他自动弹层，它们会先被关闭。这就天然实现了UI组件库里的互斥效果。
三、落地思路2：手动控制的右侧滑出面板
有些操作面板不想让用户点外部就关闭，比如一个编辑筛选条件的抽屉。这时适合用popover="manual"。
<button popovertarget="filter-panel">高级筛选</button>
<div id="filter-panel" popover="manual" class="drawer">
<h3>筛选条件</h3>
<form onsubmit="return false;">
<label>关键词<input type="text" name="keyword"></label>
<label>分类
<select name="category">
<option value="0">全部</option>
<option value="1">前端</option>
<option value="2">后端</option>
</select>
</label>
<button popovertarget="filter-panel" popovertargetaction="hide">确定</button>
</form>
</div>
注意按钮里我写了popovertargetaction="hide"，意思是点击这个按钮时，只负责隐藏弹层。配合manual模式，用户怎么点外部都关不掉，只有点确定按钮才关。这个交互逻辑很接近Material设计里的Bottom Sheet。
drawer要出现在右侧，还是得写点CSS，但核心开关逻辑是浏览器给的。比过去用classList.add/remove踏实多了。
四、落地思路3：多级菜单嵌套
多级菜单是很多前端项目里比较棘手的事。常见的做法是鼠标移到某个一级菜单上，再显示对应的二级菜单。如果用popover来搞，你会发现“自动关闭”的行为其实支持嵌套。
先看代码：
<div id="file-menu" popover class="menu">
<button popovertarget="sub-edit" popovertargetaction="toggle">
编辑
</button>
<button>复制</button>
<button>删除</button>
</div>
<div id="sub-edit" popover class="submenu">
<button>撤销</button>
<button>重做</button>
</div>
当file-menu显示的时候，点击“编辑”按钮，会显示sub-edit这个二级弹层。此时如果再点击二级弹层以外的区域，只会关闭“最外层”的弹层，二级菜单不会跟着一起关掉。如果点击的是二级菜单里的按钮，两个弹层也不会意外消失。
这种层级管理过去得写不少flags才行，现在浏览器把兄弟弹层之间的联动也处理了。
五、落地思路4：轻量级的Toast通知
Toast是网站里最常用的非侵入式提示。以前我们总是写一个容器，用setTimeout去添加和移除DOM节点。现在popover也能顶一阵，尤其适合那种“自动出现，然后自动隐藏”的场景。
由于popover默认显示后不会自动消失，我们需要用一点CSS动画来延长生命周期。
<button popovertarget="toast" popovertargetaction="show">
触发保存提示
</button>
<div id="toast" popover class="toast">
✓ 保存成功
</div>
配合的CSS大致是这样（写在别的CSS文件里）：
#toast[popover]:popover-open {
animation: fade-in 0.2s, slide-in 0.2s;
}
@keyframes fade-in {
from { opacity: 0; }
}
@keyframes slide-in {
from { transform: translateY(-10px); }
}
要注意，popover元素默认隐藏是通过display: none实现的，而:popover-open伪类可以帮我们判断当前是否处于打开状态。利用这个伪类，我们就能把弹层显示、隐藏时的动画一并做了。
如果非要用JS让它1秒后自动消失，可以简单写成：
const toast = document.getElementById('toast');
toast.showPopover();
setTimeout(() => toast.hidePopover(), 3000);
这里调用了showPopover()和hidePopover()方法，是Popover API暴露给JavaScript的命令式接口。就算你坚持不用JS操作状态，浏览器也没把这条路堵死。
六、落地思路5：popover 与 dialog 的正确分工
很多教程把popover和原生dialog混在一起聊，容易让人懵。实际项目中我的经验是：
非模态的临时面板、菜单、气泡、通知，优先用popover。模态对话框、要求用户必须完成某个操作才能继续的界面，用dialog。
dialog有个专门的showModal()方法，它会创建一层“顶级层”，把背景屏蔽掉，同时让焦点只在对话框内部循环。这是做表单流程、删除确认、协议弹窗的标准选择。
比如删除确认，我们可以这样写：
<dialog id="delete-dialog">
<form method="dialog">
<p>确定要删除这条记录吗？</p>
<button value="cancel">取消</button>
<button value="confirm">删除</button>
</form>
</dialog>
<button onclick="document.getElementById('delete-dialog').showModal()">
删除这条记录
</button>
注意里面的form method="dialog"，这是原生对话框特有的操作：点击submit按钮后，表单会把对话框关闭，同时把button的value传给close事件。这种模式下连“事件监听”都简化到只用一个close回调就能拿到结果。
那么popover和dialog能否混用？可以的。比如在一个模态dialog里，放一些帮助气泡，这些气泡用popover显示完全没问题，dialog并不会影响popover的显示层级。浏览器会把popover临时“提升”到更高层级，和dialog共存。
七、兼容性与几个值得注意的坑
用之前还是要瞄一眼兼容性。Chrome和Edge从114版本开始支持Popover API，Safari从17.0开始支持，Firefox从125版本开始支持。如果还要维护老系统，需要仔细考虑降级方案。
我的降级策略很简单：给弹层默认加上hidden属性，让老浏览器保持隐藏；在不支持popover的浏览器里，手动用hidden和按钮的aria-expanded来做折叠面板，而不是完整弹层。
另外有几个坑想提醒一下：
第一個，popover元素默认是position: fixed的。也就是说，它会以视口为定位基准，而不是距离最近的relative父元素。想改成绝对定位，需要自己写样式。
第二，不要在同一个元素上同时加popover和dialog。这两个机制底层相互干扰，行为不可预期。
第三，popover打开时并不会把焦点自动移入弹层。为了键盘可达性，建议在弹层里放一个可聚焦元素，或者明确用JavaScript在showPopover后调用focus()。虽然popover API很新，但可访问性不能丢。
还有一点，popovertarget只适用于HTML元素，并不限制是button还是div。从语义上来讲，能用button就用button，因为它自带Enter键和Space键触发click的能力。
八、写在最后
Popover API 不是什么颠覆性的东西，但它的出现填补了HTML里一个很长很长的空白。以前要写一百行的行为逻辑，现在变成属性的排列组合。这不只是代码量变少，更重要的是心智负担轻了——浏览器帮你处理edge case，你只需要告诉它“谁是触发者，谁是弹层”。
如果你正准备新写后台界面，或者想把老代码里的Bootstrap Dropdown替换掉，可以试试今天聊到的Popover API。打开你的浏览器控制台，直接敲一遍文章里的示例，就能感受到那种“凭空多了个帮手”的爽快。
弹窗的事，也是时候交给浏览器自己拉。
