<dialog>+showModal()是最轻量语义方案，但需满足三条件：必须是<body>直接子元素、用JS调用showModal()而非open属性、Safari≤15.3需手动补::backdrop样式；禁用alert/confirm因其阻塞、不可定制、关闭原因无法区分。
直接用 <dialog> + showModal() 是最轻量、语义最准的方案，但 Safari 15.4 之前不支持 backdrop，必须手动补样式；若需兼容老浏览器，得回退到 class 切换 + 手动管理遮罩和焦点。
为什么不用 alert() 或 confirm() 做确认取消？
它们是阻塞式原生对话框，无法自定义按钮文字、样式或内容结构，且在部分 iOS 版本中会禁用页面滚动，还可能被浏览器拦截。更重要的是：confirm() 返回布尔值，没法区分“点取消”和“点右上角 X”（后者直接返回 false，和用户点取消一样），业务逻辑容易误判。
<dialog> 的正确写法和常见翻车点
必须满足三个硬性条件，否则 backdrop 不显示、Esc 不生效、点击外部不关闭：
-
<dialog>元素必须是<body>的**直接子元素**，不能嵌套在<div id="app">或 Vue/React 根容器里 - 不能靠
open属性初始化显示（<dialog open>），必须用 JS 调用modal.showModal()，否则模态行为（如焦点锁、backdrop）不激活 - Safari ≤15.3 需手动加 CSS：
dialog::backdrop { background: rgba(0,0,0,0.5); }，否则点击外部无反应 - 监听
close事件获取关闭原因：modal.addEventListener('close', () => { console.log(modal.returnValue); })，returnValue是字符串，由modal.close('confirm')或modal.close('cancel')设置
手动实现时，如何避免点击关闭按钮后弹窗闪一下又出现？
这是典型的事件冒泡导致的：关闭按钮（比如 <button class="close">×</button>）点击后，事件继续冒泡到外层遮罩或 body，触发了“点击外部关闭”的逻辑，结果刚关掉又被重新打开。解决方式很明确：
立即学习“前端免费学习笔记（深入）”；
- 给关闭按钮的 click 处理函数第一行加
event.stopPropagation() - 不要给遮罩层（backdrop）本身设
click事件去关弹窗，而是监听document的捕获阶段：document.addEventListener('click', handler, true) - 判断逻辑必须用
!modal.contains(event.target)，而不是event.target === backdrop—— 后者漏掉点击 backdrop 文字、图标等子元素的情况 - 如果弹窗含
<input>或<button>，记得给<dialog>或弹窗容器设tabindex="-1"，否则focusout关闭不可靠
表单提交前弹确认，怎么防止重复点击提交？
用户狂点“提交”按钮，弹窗还没出来，请求已经发出去了。关键不是弹窗怎么做，而是交互节奏要卡住：
- 点击提交按钮后，立刻
button.disabled = true，并改文字为“提交中…” - 再调用
showModal()；不要反过来——先弹窗再禁用按钮，中间有时间差 - 用户点“确认”后，执行提交逻辑；点“取消”则恢复按钮状态：
button.disabled = false; button.textContent = '提交' - 如果提交是异步的（如 fetch），成功或失败后都必须手动恢复按钮，否则用户会以为卡死
真正难的不是写出能弹出来的代码，而是让弹窗在各种边界下不抢焦、不穿透、不误关、不重复提交——这些细节藏在事件流、DOM 位置和状态同步里，漏一个就出问题。
