前端项目里有一个组件几乎不可能绕过——弹出对话框。确认操作、展示详情、登录框、图片预览，全都需要弹窗。很长一段时间里，要么用Bootstrap的Modal，要么从Ant Design或Element UI里引一个组件，再或者自己写一堆div叠起来，手动管焦点、管滚动穿透、管aria属性，麻烦得不行。每个项目都在重复造这个轮子。
现在其实可以不用任何第三方库了。HTML的<dialog>元素从2022年起所有主流浏览器都支持了，搭配新出的Popover API，不仅模态对话框，连下拉菜单、tooltip这类非模态弹出层都能用原生语义化标签搞定。这篇文章就把这两个东西串起来，从最基础的dialog用法说到完整的自定义组件封装，最后给出一个可以直接在项目里用的对话框方案，不引入一行CSS框架，不依赖一个JS库。
dialog元素的基本用法
<dialog>本身是个双标签，放在里面的是弹窗内容。它默认是隐藏的，页面上看不见。想让它显示，得调用它身上的两个方法之一：show()和showModal()。
show()打开的是非模态对话框——用户可以继续和页面其他部分交互，就像个悬浮提示。showModal()打开的是模态对话框，会自动给背景加一层半透明遮罩，并且阻止和页面其余元素的交互。这层遮罩就是::backdrop伪元素，可以用CSS自定义。
先看一个最简单的例子：
<dialog id="confirm-dialog">
<p>确定要删除这条记录吗？</p>
<button id="confirm-yes">确定</button>
<button id="confirm-no">取消</button>
</dialog>
<script>
const dialog = document.getElementById('confirm-dialog');
document.getElementById('open-btn').addEventListener('click', () => {
dialog.showModal();
});
document.getElementById('confirm-no').addEventListener('click', () => {
dialog.close();
});
</script>关闭对话框除了close()方法，还可以按Esc键。按下Esc时，dialog会自动触发close事件，我们只需要监听事件来做后续处理。
关闭时可以传一个返回值给close()，例如dialog.close('confirmed')。这个值会保存在dialog.returnValue属性上。结合close事件，可以很干净地处理用户操作：
dialog.addEventListener('close', () => {
if (dialog.returnValue === 'confirmed') {
console.log('用户选择了确定');
}
});
document.getElementById('confirm-yes').addEventListener('click', () => {
dialog.close('confirmed');
});
不需要手动管理display属性，不需要在body上挂类名，不用自己写遮罩层——showModal全干了。而且它自动处理了tab键焦点循环，焦点不会跑到对话框外面去，这在手动实现的方案里可是要费不少劲的。
用inert属性控制后台交互
showModal()已经把对话框之外的元素变成了不可交互状态，但如果是用show()打开的非模态弹窗，背景内容依然可以操作。有时需要让非模态弹窗也能“半模态”——弹窗以外的区域不能交互，但不想要那层遮罩。这时可以用inert属性。
inert是HTML的一个布尔属性，加到哪个元素上，那个元素及其所有子元素都会变得不可交互且被辅助功能忽略。给主内容区加inert，然后打开非模态dialog，效果类似于模态但遮罩可控：
const main = document.querySelector('main');
const dialog = document.querySelector('#my-dialog');
// 打开时
main.setAttribute('inert', '');
dialog.show();
dialog.addEventListener('close', () => {
main.removeAttribute('inert');
});这种方式比加pointer-events: none更彻底，尤其是对键盘和屏幕阅读器的屏蔽。和showModal的遮罩行为相比，inert给了你更大自由度去定义背景区域的视觉表现。
自定义样式和动画
原生的<dialog>在不同浏览器里的默认样式不太一致——有的边框粗，有的padding大。正式用的时候肯定要覆盖。可以直接给dialog标签写CSS，不需要额外容器。
对话框的遮罩层通过::backdrop伪元素定制：
dialog::backdrop {
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(2px);
}加动画可以用CSS的@keyframes结合[open]属性选择器。对话框打开时会有open属性，关闭时消失。不过由于关闭是瞬间移除的，要做出场动画稍微麻烦点，需要监听close事件，在事件里延迟移除动画类。一个常见的做法是给dialog加一个closing类来控制淡出：
dialog.addEventListener('close', () => {
dialog.classList.add('closing');
dialog.addEventListener('animationend', () => {
dialog.classList.remove('closing');
}, { once: true });
});然后用CSS定义dialog[open]和dialog.closing的动画。但要注意，在close事件触发时open属性已经被移除，所以依赖[open]的动画不一定能按预期播放。稳妥一点，在调用close()之前先加动画类，然后动画结束再真正close()。这需要自己封装一个关闭方法。
Popover API：非模态弹出层的原生方案
dialog解决的是“弹窗”问题，而页面里还有大量“小弹出层”的需求——下拉菜单、tooltip、颜色选择器。这些用dialog过于重型，Popover API专门处理这类场景。
Popover的使用极其简单：给任意元素加上popover属性，它就变成了一个弹出层，默认隐藏。通过一个触发按钮的popovertarget属性指向它的id即可控制显隐。不需要写一行JavaScript。
<button popovertarget="info-popover">显示信息</button>
<div popover id="info-popover">
<p>这里是弹出的提示信息。</p>
</div>点击按钮，这个div就会显示在页面顶层（Top Layer）。点击弹出层以外的区域或者按Esc会自动关闭。如果想让按钮同时负责打开和关闭，把popovertargetaction设为"toggle"（这也是默认行为）。
Popover和dialog可以结合使用。比如对话框里的一个下拉筛选条件，用Popover实现列表选项，既不需要z-index大战，也不会被对话框裁切——因为它会被渲染到顶层，层级比dialog更高。
还有popover属性值为auto和manual两种模式。auto模式下点击外部会自动关闭（类似下拉菜单的体验），manual模式则需要手动调用hidePopover()，适合需要复杂交互逻辑的弹出层（比如需要内部按钮提交后才能关闭的表单）。
打造一个完整的对话框组件
把上面的知识串起来，封装一个可以直接复用的<custom-dialog>组件。这里不使用Web Components的Shadow DOM，就用普通HTML结构配合一个简单的JS类，方便理清逻辑。
HTML模板：
<dialog id="custom-dialog">
<div class="dialog-header">
<h3 id="dialog-title">对话框标题</h3>
<button id="dialog-close-btn" aria-label="关闭">×</button>
</div>
<div id="dialog-body"></div>
<div class="dialog-footer">
<button id="dialog-cancel">取消</button>
<button id="dialog-confirm">确定</button>
</div>
</dialog>包装一个DialogBox类来控制显示内容和回调：
class DialogBox {
constructor() {
this.dialog = document.getElementById('custom-dialog');
this.titleEl = document.getElementById('dialog-title');
this.bodyEl = document.getElementById('dialog-body');
this.confirmBtn = document.getElementById('dialog-confirm');
this.cancelBtn = document.getElementById('dialog-cancel');
this.closeBtn = document.getElementById('dialog-close-btn');
this._resolve = null;
this.cancelBtn.addEventListener('click', () => this.close('cancel'));
this.closeBtn.addEventListener('click', () => this.close('cancel'));
this.confirmBtn.addEventListener('click', () => this.close('confirm'));
this.dialog.addEventListener('close', () => {
if (typeof this._resolve === 'function') {
this._resolve(this.dialog.returnValue);
this._resolve = null;
}
// 清理body内容，避免内存泄漏
this.bodyEl.innerHTML = '';
});
}
open({ title, body, confirmText = '确定', cancelText = '取消' }) {
this.titleEl.textContent = title;
this.bodyEl.innerHTML = body; // 实际项目应防范XSS
this.confirmBtn.textContent = confirmText;
this.cancelBtn.textContent = cancelText;
this.dialog.showModal();
return new Promise((resolve) => {
this._resolve = resolve;
});
}
close(returnValue) {
this.dialog.close(returnValue);
}
}使用起来就是：
const dialog = new DialogBox();
const result = await dialog.open({
title: '删除确认',
body: '<p>此操作不可恢复，请确认。</p>',
});
if (result === 'confirm') {
// 执行删除
}你可以根据需要在构造函数里加上对inert的支持，或者在open时自动禁用背景区域的交互。这个组件没有引入任何库，仅靠原生HTML和少量JS，已经把对话框的核心使用模式——打开、传递内容、等待用户操作、返回结果——完整走通了。
无障碍细节不要丢
dialog元素原生已经做了很多无障碍工作：自动聚焦到对话框内的第一个可聚焦元素、Esc关闭、aria-modal自动添加。但作为开发者，仍然有几个地方需要手动增强。
按钮文本只有符号（比如×）时，记得加上aria-label，否则屏幕阅读器读出来会是“乘号按钮”。
长对话框内容量较大时，第一行可聚焦的可能不是最合理的元素（比如是一个小的关闭按钮），可以用autofocus属性手动指定应该首先获得焦点的按钮，通常是“确定”或内容区域。
打开对话框后，可以按需把焦点之外的主内容区域加上aria-hidden="true"，虽然showModal已经阻止交互，但无障碍树上的隐藏会更彻底。不过这个操作对大多数场景来说不是必需的，dialog的默认行为已经足够应对。
浏览器支持与降级
<dialog>元素从Chrome 37、Edge 79、Firefox 98、Safari 15.4开始全功能支持。2025年的当下，全球覆盖率已经超过97%，移动端也全面覆盖。如果你的项目还需要兼容极少数老旧浏览器，唯一的降级方式是引入polyfill。经典的dialog-polyfill库仍然可用，它模拟了showModal和遮罩行为，但::backdrop样式需要用额外的.backdrop类来模拟。
Popover API稍新一点，但也在Chrome 114、Edge 114、Safari 17、Firefox 125得到支持，移动端同样全面覆盖。如果遇到不支持的环境，Popover会直接退化为一个普通的div，内容一直可见，所以对于纯增强性的提示场景来说，不至于导致功能完全失效。
小结
从dialog到popover，再到inert属性，浏览器正在把过去需要大量JS模拟的UI模式固化为原生语义。用这些原生能力构建的对话框组件，代码量少，可访问性好，而且没有版本升级的负担——只要浏览器还在，这些功能就在。
如果你在下一个项目里又被要求做一个弹窗，不妨先打开HTML文件写一个<dialog>，再用几行JS包一层Promise，看看是不是已经够用了。很多场景下，它真的足够了。
