<dialog> 元素无内置确认/取消按钮，需手动添加按钮并调用 close("confirmed") 或 close("canceled")；关闭时通过 dialog.returnValue 获取结果，而非事件对象；需兼容旧浏览器并手动实现动画与 backdrop 样式。
dialog 元素本身不带确认取消按钮
<dialog> 是原生 HTML 对话框容器，它只负责模态层、焦点捕获和基础显示/隐藏逻辑，没有内置“确认”“取消”按钮行为。你看到的带按钮的“确认框”，其实是自己用 <button> + JavaScript 控制 showModal() / close() 实现的。
常见错误是直接写：<dialog confirm> 或期待 dialog.confirm() 方法 —— 这些都不存在，浏览器会静默忽略。
- 必须手动添加两个
<button>（一个type="submit"或普通按钮触发确认，一个type="button"触发取消） - 点击“确认”后，需显式调用
dialog.close("confirmed")；点击“取消”调用dialog.close("canceled")，这样后续才能通过dialog.returnValue区分结果 - 不要依赖
click事件冒泡去监听 dialog 外部点击关闭：默认情况下，点击 backdrop（灰色遮罩）会触发close事件，但returnValue为空字符串，不是"canceled"
如何正确监听 dialog 关闭并获取用户选择
不能只监听 close 事件然后查 event.target.returnValue —— 因为 returnValue 是 dialog 元素自身的属性，不是事件对象上的。
正确做法是：在 close 事件回调里，直接读取 dialog 实例的 returnValue 属性：
立即学习“前端免费学习笔记（深入）”；
<dialog id="confirmDialog">
<span>确定要删除吗？</span><button id="confirmBtn">确认</button><button id="cancelBtn">取消</button>
</dialog>
<p><script>
const dialog = document.getElementById('confirmDialog');
dialog.addEventListener('close', () => {
if (dialog.returnValue === 'confirmed') {
console.log('用户点了确认');
} else if (dialog.returnValue === 'canceled') {
console.log('用户点了取消');
} else {
console.log('用户点了遮罩或按 Esc 关闭'); // returnValue 为空字符串
}
});</p><p>document.getElementById('confirmBtn').onclick = () => dialog.close('confirmed');
document.getElementById('cancelBtn').onclick = () => dialog.close('canceled');
</script>IE 和旧版 Safari 不支持 dialog，必须降级处理
<dialog> 在 Chrome 37+、Firefox 98+、Edge 79+、Safari 15.4+ 才稳定支持。Safari 15.0–15.3 存在严重 bug：调用 showModal() 后无法聚焦、Esc 键无效、backdrop 点击无响应。
如果你需要兼容 Safari 15.0–15.3 或更老版本，不能只靠特性检测 'showModal' in HTMLDialogElement.prototype，还得加 UA 判断或运行时试探：
- 简单降级：用
div+position: fixed+ 手动管理tabindex和焦点环 - 中等降级：引入
dialog-polyfill，但它不修复 Safari 15.0–15.3 的 focus bug，需额外 patch - 关键逻辑别只依赖
dialog.returnValue：服务端或上层业务应把“确认动作”视为独立请求，而非强依赖前端返回值
dialog 没有内置动画，CSS 过渡需手动控制 open 状态
<dialog open> 是布尔属性，没有过渡钩子。想实现淡入/缩放入场效果，得监听 toggleAttribute('open') 或用 MutationObserver，但更可靠的方式是：在调用 showModal() 前先加类，再用 setTimeout 延迟 1 帧后加 open 属性：
function showModalWithAnimation(dialog) {
dialog.classList.add('is-opening');
dialog.showModal();
// 等待浏览器渲染 open 状态后再触发动画
setTimeout(() => dialog.classList.add('is-open'), 1);
}
<p>/<em> CSS </em>/
dialog.is-opening { opacity: 0; transform: scale(0.95); }
dialog.is-open { transition: opacity 0.2s, transform 0.2s; opacity: 1; transform: scale(1); }
注意：直接对 dialog[open] 写 transition 无效，因为 open 属性变更不会触发重绘 —— 它只是切换 display 状态。
真正容易被忽略的是 backdrop 样式：它不可选中、无 class、无法用 :before/:after，只能通过 ::backdrop 伪元素定制，且 Safari 15.4+ 才支持。如果要改遮罩颜色，必须写 dialog::backdrop { background: rgba(0,0,0,0.5); }，而不是试图给 dialog 加背景。
