不能直接改alert()样式，因其是浏览器原生API，渲染由系统控制，CSS完全无效，且会阻塞JS执行；现代替代方案首选语义化元素，需挂载DOM后在用户手势中调用showModal()，关闭后必须close()并remove()。
为什么不能直接改 alert() 的样式
因为 alert() 是浏览器原生 API，所有渲染逻辑由系统控制，CSS 完全无效，连文字颜色、按钮文案、位置、尺寸都不可干预。更关键的是它会阻塞 JS 执行，用户点确定前后续代码不运行——这在现代异步交互中极易引发状态错乱，比如 fetch 请求已发但 UI 卡住没更新。
用 <dialog></dialog> 替代是最轻量合规的方案
Chrome 37+、Edge 79+、Firefox 98+、Safari 15.4+ 均原生支持，无需第三方库，语义正确且自带模态行为（焦点锁定、Esc 关闭、键盘导航）。但必须注意两个硬性条件：
-
<dialog></dialog>元素必须已挂载到 DOM 中，不能先创建再调showModal()；推荐写法：document.body.appendChild(dialog)后立即调用 - 调用
showModal()必须发生在用户手势上下文（如 click、keydown），不能在fetch().then()或定时器里直接调——否则报错Failed to execute 'showModal' on 'HTMLDialogElement'；稳妥做法是包一层setTimeout(() => dialog.showModal(), 0) - 关闭后务必调
dialog.close()，再配合dialog.remove()彻底从 DOM 移除；只设display: none会导致读屏软件持续播报、Tab 键仍可聚焦到隐藏按钮
需要兼容老浏览器或更灵活布局？用 div + CSS 定位
当目标环境含 IE 或旧版 Android WebView 时，<dialog></dialog> 不可用，得回退到绝对/固定定位的 div。核心要点不是“怎么弹出来”，而是“怎么不干扰其他逻辑”：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 遮罩层必须加
tabindex="-1"并监听keydown捕获 Esc，否则键盘无障碍失效 - 弹窗内容区需手动
focus()到首个可聚焦元素（如确认按钮），否则焦点留在背景页面上 - 不要用
innerHTML渲染用户输入的内容，有 XSS 风险；应统一用textContent设置提示文字 - 若弹窗由 Vue/React 等框架驱动，关闭时别只靠
v-if或useState(false)，要确保组件卸载后 DOM 真被清除，否则残留节点可能影响后续表单验证或焦点管理
警告类提示优先用 role="alert" 横幅而非弹窗
真正高频、低干扰的警告（如表单校验失败、预算超支、网络降级），不该打断用户操作。此时 <div role="alert" aria-live="assertive"> 比弹窗更合适：<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>
<ul>
<li>CSS 关键属性：必须含 <code>position: fixed; top: 0; width: 100%; z-index: 1000;，背景色建议 #fff3cd，文字色 #856404
element.remove()，不能只 display: none——否则仍存在于 DOM，读屏软件可能反复播报真正难的从来不是“怎么显示”，而是“什么时候该消失”和“消失后是否真从 DOM 清除”。线上多数警告相关 bug，都卡在这两个环节上。
