alert() 不能直接集成到现代项目里，因其阻塞主线程、无法定制、移动端常被拦截且不兼容 Promise；应改用原生 元素并确保在用户手势上下文中调用 showModal()。
alert() 不能直接集成到现代项目里——它阻塞主线程、无法定制、移动端常被拦截，上线前必须替换。
为什么不能直接用 alert() 替代警告对话框
常见错误现象：在 Vue/React 组件的 useEffect 或 mounted 钩子里调用 alert()，结果页面卡死、后续事件监听器没注册上；或在 fetch().then() 里弹出，发现用户还没看到就跳转了。
-
alert()是同步阻塞式调用，JS 执行会暂停，与 Promise、async/await 完全不兼容 - 返回值恒为
undefined，无法用于流程控制（比如“用户点了确定才提交表单”） - 不支持 HTML、CSS、按钮文字自定义，iOS Safari 中可能静默拦截（尤其非用户手势触发时）
- 服务端渲染（SSR）环境直接报错：
ReferenceError: alert is not defined
用
现代浏览器（Chrome 37+、Edge 79+、Firefox 98+、Safari 15.4+）已原生支持，无需引入任何库。
- HTML 结构中写好
，但别指望它自动显示 - 必须手动插入 DOM 并调用
showModal()：document.body.appendChild(dialog); setTimeout(() => dialog.showModal(), 0)（否则报Failed to execute 'showModal' on 'HTMLDialogElement'） - 关闭后
dialog.open变为false，但元素仍在 DOM 中——若反复调用，得提前dialog.remove()或复用同一节点 - CSS 至少加
dialog { border: 1px solid #ccc; padding: 1em; margin: auto; }，否则 Safari 下可能看不见边框
如何在非用户手势上下文中安全触发 showModal()
比如从 API 错误回调、定时器、WebSocket 消息里弹警告，浏览器会拒绝执行并抛错。这不是 bug，是规范限制。
- 核心原则：所有
showModal()调用必须发生在用户点击、键盘按键等“可信任事件”处理函数内 - 折中方案：把警告逻辑拆成两步——先存状态（如
useState({ showWarning: true, message: '网络异常' })），再由一个隐藏按钮（display: none）触发显示，用户点击任意操作按钮时再click()它 - 不要用
setTimeout(() => dialog.showModal(), 100)试图绕过，多数浏览器仍会判定为不可信上下文 - 若必须异步响应（如校验失败后弹窗），改用非模态提示：+ CSS 固定定位横幅
真正难的不是“怎么让它弹出来”，而是“它关了之后是否真从 DOM 清除了”——残留的
会干扰焦点流、被读屏软件反复播报、甚至导致内存泄漏。每次close事件后检查是否需要remove()，别只设display: none。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
