几个月前检查项目依赖，发现仅仅为了一个确认删除的弹窗和两个悬浮提示，我们引入了整个Bootstrap的JS和CSS，还有一段十几行的jQuery代码。打包后的体积多了好几十KB，而且模态框的焦点管理、键盘可访问性还得额外处理。事实上，现代HTML已经内置了这些能力——<dialog>元素和Popover API让我们几乎不用写JavaScript就能创建稳健的模态对话框和弹出层。今天就用几个真实场景把这两个原生武器讲透彻。
一、<dialog>为什么值得你马上用
在以前，创建一个模态框需要手动添加遮罩层、处理Esc关闭、聚焦陷阱、滚动锁定，还要用position: fixed和z-index: 9999去覆盖页面。但<dialog>元素本身就实现了这些：
- 通过
.showModal()方法打开时，浏览器自动添加屏幕遮罩（::backdrop），并阻止背景滚动。 - 按Esc键自动关闭对话框。
- 焦点自动移动到对话框内第一个可聚焦元素，关闭后焦点回到触发按钮。
- 符合ARIA规范，屏幕阅读器能正确识别。
下面从一个简单的确认删除对话框开始，完全用HTML和微乎其微的JavaScript实现。
<!-- 触发按钮 -->
<button id="deleteBtn">删除项目</button>
<!-- 对话框结构 -->
<dialog id="confirmDialog">
<p>确定要删除这个项目吗？此操作无法撤销。</p>
<form method="dialog">
<button value="cancel">取消</button>
<button value="confirm" id="confirmDelete">确认删除</button>
</form>
</dialog>这里的<form method="dialog">是关键。当表单内的按钮被点击时，表单会自动提交并关闭对话框，同时按钮的value会作为对话框的returnValue。JavaScript只需要两件事：打开对话框，以及响应关闭事件拿返回值。
const dialog = document.getElementById('confirmDialog');
const deleteBtn = document.getElementById('deleteBtn');
deleteBtn.addEventListener('click', () => {
dialog.showModal();
});
dialog.addEventListener('close', () => {
if (dialog.returnValue === 'confirm') {
// 执行删除逻辑
console.log('执行删除');
}
});不需要手动绑定Esc键，也不需要写任何关闭按钮的逻辑，表单内的任意按钮都能自然关闭对话框。这种模式比传统手写模态框少了至少50%的代码量，并且完全避免了焦点丢失、背景滚动等常见缺陷。
二、模态表单：对话框里还能包含复杂输入
上面的确认框使用method="dialog"直接关闭，但如果要在对话框里填写内容并获取数据，就需要稍微调整策略。我们做一个“新增地址”的模态表单，让用户在对话框中输入省市区和详细地址，提交后拿到数据。
<dialog id="addressDialog">
<h3>新增地址</h3>
<form id="addressForm">
<label>
省/市/区：<input type="text" name="region" required>
</label>
<label>
详细地址：<input type="text" name="detail" required>
</label>
<div class="actions">
<button type="button" id="cancelAddress">取消</button>
<button type="submit">保存</button>
</div>
</form>
</dialog>这次表单不使用method="dialog"，因为我们希望在提交时验证数据，并且只在验证通过后手动关闭。JavaScript负责打开、取消和提交处理。
const addressDialog = document.getElementById('addressDialog');
const addressForm = document.getElementById('addressForm');
const cancelBtn = document.getElementById('cancelAddress');
const openAddressBtn = document.getElementById('openAddressBtn');
openAddressBtn.addEventListener('click', () => {
addressDialog.showModal();
});
cancelBtn.addEventListener('click', () => {
addressDialog.close();
});
addressForm.addEventListener('submit', (event) => {
event.preventDefault(); // 阻止默认提交
const formData = new FormData(addressForm);
const region = formData.get('region');
const detail = formData.get('detail');
if (region && detail) {
console.log('地址数据：', { region, detail });
addressDialog.close();
addressForm.reset(); // 清空表单
}
});同样地，按Esc依然能关闭对话框，且无需额外代码。关闭时不会自动提交，数据不会丢失。如果要进一步改善体验，可以在关闭后恢复用户之前聚焦的触发按钮，<dialog>已经自动处理了焦点恢复，不需要我们再操心。
如果希望在对话框关闭之前进行确认（比如表单已填写，按Esc弹出确认），可以监听cancel事件：
addressDialog.addEventListener('cancel', (event) => {
// 表单非空时阻止直接关闭，弹出原生确认
if (addressForm.reportValidity() && formHasData()) {
event.preventDefault(); // 阻止对话框关闭
// 可以弹出另一个 dialog 或浏览器 confirm，此处略
}
});这让模态表单的交互逻辑变得非常细腻，而且完全是浏览器原生的稳定行为。
三、Popover API：悬浮提示和菜单不再需要第三方库
除了模态对话框，另一个高频使用的UI组件是弹出层，比如点击按钮弹出菜单、鼠标悬停显示提示卡。过去我们使用Bootstrap的Popover或自己写绝对定位的div，现在Popover API（正式名称是popover属性）让我们在HTML层面就完成了弹出层的创建与定位。
先做一个最简单的点击弹出提示：
<button id="infoBtn">更多信息</button>
<div id="infoPopover" popover>
<p>商品采用可再生材料，碳足迹减少40%。</p>
</div>然后通过JavaScript将按钮和弹出层关联，点击按钮时切换显示：
const infoBtn = document.getElementById('infoBtn');
const infoPopover = document.getElementById('infoPopover');
infoBtn.addEventListener('click', () => {
if (infoPopover.matches(':popover-open')) {
infoPopover.hidePopover();
} else {
infoPopover.showPopover({ source: infoBtn });
}
});这里的关键是popover属性让<div>成为了一个弹出层，浏览器会将它提升到顶层（top layer），自动处理z-index，并且点击弹出层外部区域时自动关闭（如果使用popover="auto"，这是默认行为）。如果设置popover="manual"，则完全由开发者控制显示/隐藏，不会自动关闭。
Popover API的一个巨大优势是：不需要手动计算弹出位置，浏览器会基于source元素的锚点进行定位。还可以配合CSS的anchor()函数（CSS锚点定位）实现更精确的布局，但目前浏览器支持尚不完整。不过默认的居中顶层显示已经满足很多场景。
再做一个悬浮卡片，用纯CSS触发，无需JavaScript：
<div class="card-container">
<button popovertarget="cardPopover" popovertargetaction="toggle">查看详情</button>
<div id="cardPopover" popover>
<img src="product.jpg" alt="产品图" width="150">
<span>此商品参与满减活动</span>
</div>
</div>利用popovertarget和popovertargetaction属性，按钮可以直接控制弹出层的显示/隐藏，完全零JavaScript。如果希望悬停触发，可以结合少许CSS和伪类，但原生Popover并不支持悬停触发事件，需要一点JavaScript监听mouseenter/mouseleave来调用showPopover/hidePopover，但这依旧比引入整个库轻量得多。
button.addEventListener('mouseenter', () => popover.showPopover());
button.addEventListener('mouseleave', () => popover.hidePopover());
popover.addEventListener('mouseenter', () => popover.showPopover());
popover.addEventListener('mouseleave', () => popover.hidePopover());通过双向悬停保持弹出层可见，实现了用户友好的悬浮提示。
四、把<dialog>和Popover结合起来用在表单中
实际业务里，有时需要在表单内部使用弹出选择器，例如日期选择、下拉多选。这些组件可以放在<dialog>内部作为模态面板，也可以直接用Popover做一个非模态的下拉框。我们设计一个“标签选择器”，点击输入框弹出标签列表，选择后填入输入框。
<div class="tag-picker">
<input type="text" id="tagInput" readonly>
<button id="tagBtn" popovertarget="tagPopover">选择</button>
<div id="tagPopover" popover>
<ul>
<li data-value="前端">前端</li>
<li data-value="后端">后端</li>
<li data-value="设计">设计</li>
</ul>
</div>
</div>点击列表项时，用JavaScript将值填入输入框，并关闭Popover：
document.querySelector('#tagPopover ul').addEventListener('click', (e) => {
if (e.target.tagName === 'LI') {
document.getElementById('tagInput').value = e.target.dataset.value;
e.target.closest('[popover]').hidePopover();
}
});这个组合完全由原生能力驱动，没有额外的DOM嵌套，焦点和滚动行为都由浏览器处理。
五、兼容性和注意事项
<dialog>自Chrome 37起就支持，但早期版本需要polyfill。现在所有现代浏览器都已完全支持showModal和::backdrop。Popover API在Chrome 114、Edge 114、Safari 17和Firefox 125中得到支持，覆盖了当前主流用户群体。如果你的项目还需要考虑过旧浏览器，可以引入约2KB的polyfill（如@oddbird/popover-polyfill）或者提供降级方案——对于不支持Popover的浏览器，弹层仍然会作为普通流中元素显示，只是没有浮层效果，不会造成功能瘫痪，这通常是可以接受的。
另外需要注意，<dialog>的::backdrop样式是可以通过CSS自定义的，比如改变背景颜色、透明度，让遮罩更符合品牌调性，但这一部分仍需要全局样式表，与本文不涉及样式的约定无关。
在无障碍方面，<dialog>默认的role="dialog"和aria-modal="true"已经具备，而Popover则自动应用role="tooltip"或aria-expanded，具体取决于使用方式。这些都比手动添加ARIA属性可靠得多。
