uni-app 中 showModal 和 showToast 无法实现全屏半透明弹窗，因其遮罩层不可控、不支持 rgba 透明度及动画定制；需手写组件，用 fixed 全屏 view + rgba 背景色 + touchmove 阻止滚动，并按平台差异调整透明度与锁屏逻辑。
uni-app 里 showModal 和 showToast 做不了全屏半透明弹窗
这两个 API 是 uni-app 内置的轻量级提示，遮罩层不可控、无法全屏、透明度和动画都写死，连 maskStyle 都不支持。真要自定义，必须手写组件 + v-if 或 v-show 控制显隐。
常见错误是硬套 showModal 的 maskColor 参数——它只在部分平台（如微信小程序）生效，且仅支持十六进制颜色，不能设 rgba(0,0,0,0.5) 这种带透明度的值，H5 和 App 端基本无效。
- 真正可控的遮罩层得用一个全屏
view元素，position: fixed+top: 0+z-index高于内容 - 透明度统一用
background-color: rgba(0, 0, 0, 0.6)，别用opacity，否则子元素也会变透明 - H5 端注意加
touchmove: prevent，不然遮罩层下滑会触发页面滚动
uni-app 自定义弹窗组件怎么写结构才不卡顿
结构上最容易踩的坑是把整个弹窗（含遮罩+内容）包在 animation 或 transition 里做入场动画——uni-app 的 animation API 在 iOS 微信小程序里有严重兼容问题，动画一卡，遮罩层就“漏光”。更稳的做法是：遮罩层用 opacity 渐显，内容区域用 transform: scale() 或 translateY() 单独动。
示例关键结构：
<view class="mask" v-show="visible" @touchmove.stop="$event.preventDefault()">
<view class="popup" :class="{ 'popup-in': visible }">
<slot></slot>
</view>
</view>
-
mask类只控制背景色和 opacity，不参与 transform 动画 -
popup-in是纯 CSS 动画类，用@keyframes定义，避免 JS 驱动动画帧 - App 端若用 nvue，必须改用
animation模块，且不能和 view 混用；普通 vue 页面就老实用 CSS
uni-app 半透明遮罩层在不同平台的透明度表现差异
不是所有平台对 rgba() 解析一致。微信小程序基础库 2.27.0+ 才完整支持 rgba(0,0,0,0.6)，旧版会直接 fallback 成黑色不透明；H5 没问题；App 端（尤其是 Android）用 rgba 有时会发灰，建议实测后微调 alpha 值（比如从 0.6 改成 0.55）。
- 调试时用
uni.getSystemInfoSync().platform区分平台，动态设 mask 透明度 - 别依赖
mask-style属性——它只在uni.showModal等少数 API 中存在，且只接受字符串，不能绑定响应式变量 - 如果要用深色模式适配，遮罩层颜色别写死
rgba(0,0,0,0.6)，改成:root { --mask-bg: rgba(0, 0, 0, 0.6); }方便后续覆盖
uni-app 弹窗关闭后页面还能滚动？这是 mask 没锁 body
遮罩层显示时，body（或 page）滚动没被禁用，用户手指一划，页面照常动，体验极差。uni-app 没提供全局 lock scroll 的 API，得手动处理。
- H5 端：遮罩出现时加
document.body.style.overflow = 'hidden'，关闭时还原；注意多个弹窗嵌套时计数，别误关 - 小程序端：无法锁 body，但可在遮罩层上加
@touchmove.stop和catchtouchmove双保险 - App 端（vue 模式）：同 H5；nvue 模式下用
scroll-top锁定，或监听touchstart后preventDefault - 别忘了在
onUnload或onHide里清理 overflow 设置，否则页面跳走后滚动还被锁着
最麻烦的是多弹窗场景：一个弹窗关了，另一个还在，overflow 却被还原了。这时候得用全局状态管理遮罩层数量，而不是简单布尔值控制。
