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