<dialog> 不能直接替代 confirm()，因其异步、不阻塞 JS 执行、showModal() 返回 undefined；必须监听 close 事件并检查 returnValue 字符串（如 'confirmed'）来响应用户操作。
dialog 标签不能直接替代 confirm() 的同步阻塞行为——它异步、需手动监听、不暂停 JS 执行。想用它做确认操作，必须重构交互逻辑，否则会出错。
为什么直接替换 confirm() 会失败
调用 confirm() 后 JS 立即暂停，等用户点“确定/取消”才继续；而 dialog.showModal() 立即返回，后续代码立刻执行，根本拿不到用户选择结果。
- 写
if (myDialog.showModal()) { ... }—— 语法错误，showModal()返回undefined，不是布尔值 - 写
const result = myDialog.showModal()——result永远是undefined，无法用于条件分支 - 没监听
close事件就接着发请求 —— 用户还没点按钮，请求已发出
正确实现“确认删除”类交互的三步
核心是把“等待用户决定”这件事从同步转为事件驱动：打开弹窗 → 用户操作 → 在 close 事件里处理结果。
- 确保
<dialog>是<body>的直接子元素，否则 Safari 下::backdrop不渲染 - 用
showModal()打开，不要写open属性或调用show() - 给两个按钮分别绑定
click，调用dialog.close('confirmed')或dialog.close('canceled') - 监听
close事件，读取dialog.returnValue判断结果（注意：Safari 不支持 Promise 返回，别写await dialog.showModal()）
<dialog id="confirm-dialog"> <p>确定要删除这项记录吗？</p> <button id="confirm-btn">确定</button> <button id="cancel-btn">取消</button> </dialog>
const dialog = document.getElementById('confirm-dialog');document.getElementById('confirm-btn').onclick = () => dialog.close('confirmed');document.getElementById('cancel-btn').onclick = () => dialog.close('canceled');dialog.addEventListener('close', () => { if (dialog.returnValue === 'confirmed') { // 执行删除逻辑 } else if (dialog.returnValue === 'canceled') { // 可选：记录取消行为 }});
Safari 兼容性必须补的两件事
Safari ≤16.3 对 dialog 支持不完整，不加兜底会直接失效。
立即学习“前端免费学习笔记（深入）”；
-
dialog::backdrop伪元素在旧版 Safari 中被忽略，必须手动加 CSS：dialog::backdrop { background-color: rgba(0, 0, 0, 0.5); } - 点击遮罩关闭时，
e.target可能是body而非dialog，导致默认关闭逻辑失效。需 fallback 判断坐标：dialog.addEventListener('click', e => { if (e.target === dialog || e.clientX < dialog.getBoundingClientRect().left) dialog.close(); });
form 提交场景下避免页面刷新
如果确认弹窗里带表单（比如带输入的删除确认），直接提交会整页刷新，dialog.close() 来不及执行。
- 最简方案：给
<form>加method="dialog"属性，提交后自动关闭并设returnValue - 需要异步处理（如 fetch）时：在
submit事件中调用e.preventDefault()，再手动dialog.close()，并在close事件里发请求 - 别依赖
dialog.close()的返回值做判断——它不返回 Promise，Safari 完全不支持
真正难的不是写几行 showModal()，而是把原来靠 confirm() 阻塞式流程写的业务逻辑，全部重构成事件响应式。漏掉 close 监听、忘了 Safari 的 ::backdrop 补丁、或误以为 showModal() 会返回结果，这三处最容易让弹窗看起来“点了没反应”。
