原生alert()无法设置背景模糊，因其非HTML元素、不参与DOM渲染，CSS完全无效；必须改用自定义模态框（如div+backdrop-filter），并确保半透背景、真实底层内容及正确层叠上下文。
原生 alert() 对话框无法设置背景模糊——它由浏览器强制渲染，完全脱离 CSS 控制，任何样式都无效。
为什么给 alert() 加 backdrop-filter 没反应
这不是兼容性问题，而是根本性限制：alert() 不是 HTML 元素，不参与 DOM 渲染流程，也不接受任何 CSS。你写的样式连选择器都匹配不到它。
- 试图用
document.querySelector('dialog')或类似方式操作alert()，结果永远是null - 在 DevTools 里找不到它的节点，也看不到 computed styles
- 即使 JS 注入样式或动态创建 overlay，
alert()弹出时仍会覆盖一切、中断脚本执行
替代方案：用自定义模态框模拟警告对话框
真正可行的做法是弃用 alert()，用 <div> + <code>backdrop-filter 构建可样式化的警告层。关键结构如下：
复制代码
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
<div class="alert-overlay">
<div class="alert-dialog">
<p class="alert-message">确认删除？</p>
<button class="alert-btn confirm">确定</button>
<button class="alert-btn cancel">取消</button>
</div>
</div>
-
.alert-overlay必须设position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); -
.alert-dialog要有半透背景（如background: rgba(255, 255, 255, 0.92)），不能用纯白或transparent - 确保
.alert-overlay直接挂载在下，避免中间父元素带overflow: hidden或transform
Safari 上模糊一闪而过或文字发虚怎么办
iOS/macOS Safari 对 backdrop-filter 的合成链非常敏感，尤其在弹出动画中容易掉帧或闪烁。
- 必须双写：
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);，且-webkit-版本要放在前面 - 禁用
transform: scale(0.95)或translateZ(0)在.alert-overlay或其父级上——它们会切断 backdrop 采样 - 如果用 JS 控制显示/隐藏，别用
opacity: 0 → 1动画；改用visibility: hidden → visible配合transition: backdrop-filter 0.2s - 文字边缘锯齿？加
text-rendering: optimizeLegibility;，不要用will-change: transform强制图层（反而加剧模糊）
最易被忽略的一点：模糊是否生效，和「背后有没有内容」强相关。如果页面主体是纯白 ，那再怎么设 backdrop-filter 也只是糊一张白纸——得让 body 有真实背景（图片、渐变、甚至只是 padding 包裹的色块），模糊才有东西可采样。
