模态框遮罩不透明是因为父元素opacity导致子元素继承叠加，应使用rgba()单独设置背景层透明度；pointer-events: none需加在遮罩层并配合伪元素确保点击拦截；移动端需结合touch-action、overflow:hidden及层叠上下文排查。
模态框背景用 rgba() 为什么遮罩不透明？
因为父元素设置了 opacity，子元素会继承并叠加透明度，导致内容也变淡。直接对背景层用 rgba(0, 0, 0, 0.5) 才是正确做法——只让背景半透，内容保持 100% 不透明。
- 错误写法：
modal { opacity: 0.5; }→ 整个弹窗（含按钮、文字）都变灰 - 正确结构：用两个独立元素，
.modal-overlay（仅背景，rgba()），.modal-content（无透明相关样式） - 注意：IE8 及以下不支持
rgba()，如需兼容，得额外加filter: alpha(opacity=50)或改用半透 PNG
pointer-events: none 加在哪一层才不影响点击？
加在遮罩层（.modal-overlay）上，而不是整个模态框容器。否则鼠标事件会穿透到下层页面，用户可能误点背后按钮或链接。
- ✅ 正确：
.modal-overlay { pointer-events: none; }+.modal-overlay::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); pointer-events: auto; } - ❌ 错误：
.modal { pointer-events: none; }→ 整个弹窗不可交互 - ⚠️ 注意：如果遮罩是空 div，没设
height或background，pointer-events: auto的伪元素可能仍无法捕获点击，务必确保它有渲染尺寸和视觉占位
移动端点击穿透问题怎么破？
iOS Safari 和部分安卓浏览器在快速双击/滚动后，会把上层模态框的点击“透传”给底层元素，本质是事件冒泡+渲染延迟，pointer-events 单独不够。
- 必须同时加：
.modal-overlay { pointer-events: auto; }（确保它能拦截事件） - 给
.modal-content加touch-action: manipulation;防止误触发缩放或拖拽 - 模态框打开时，给
body加overflow: hidden;，避免滚动穿透 - 极端情况可加
ontouchstart="void(0)"到遮罩层（仅作兜底，非首选）
z-index 和层级断裂的隐性坑
即使写了 z-index: 9999，模态框也可能被挡住——常见于父容器有 transform、opacity 或 filter，这些属性会创建新的层叠上下文，把 z-index 重置为局部。
- 检查遮罩层父级是否用了
transform: translateZ(0)或will-change: transform，它们会悄悄新建层叠上下文 - 避免在模态框祖先链中使用
opacity: 0.99这类“几乎不透明”的值，它也会触发新层叠上下文 - 调试技巧：Chrome DevTools 里勾选 “Rendering > Paint flashing”，看遮罩是否被意外裁剪或脱离预期层级
真正麻烦的不是写不出半透遮罩，而是它在某个安卓机型上突然不挡点击，或者在 Safari 里点一下关不掉还触发了背后表单提交——这些都和层叠上下文、事件捕获顺序、移动端合成层策略强相关，不能只靠复制粘贴一段 CSS 解决。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
