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
用 <dialog></dialog> 快速接入的最小可行步骤
现代浏览器（Chrome 37+、Edge 79+、Firefox 98+、Safari 15.4+）已原生支持，无需引入任何库。
- HTML 结构中写好
<dialog id="warn-dialog"><p>⚠️ 数据保存失败</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a> <p>使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p> </div> <a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <button onclick="this.closest('dialog').close()">知道了</button></dialog>，但别指望它自动显示 - 必须手动插入 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)试图绕过，多数浏览器仍会判定为不可信上下文 - 若必须异步响应（如校验失败后弹窗），改用非模态提示：
<div role="alert" aria-live="assertive"> + CSS 固定定位横幅 <p>真正难的不是“怎么让它弹出来”，而是“它关了之后是否真从 DOM 清除了”——残留的 <code><dialog></dialog>会干扰焦点流、被读屏软件反复播报、甚至导致内存泄漏。每次close事件后检查是否需要remove()，别只设display: none。
