uni.showmodal 无法通过 css 修改样式，因其调用原生弹窗且不挂载 dom；三端一致方案是用透明背景 .nvue 页面模拟伪弹窗，或封装 custom-modal.vue 组件，仅用 show prop 和 @close 事件控制显隐。
uni.showModal 不能改样式，别浪费时间试 CSS
直接说结论：uni.showModal 是调用各端原生弹窗的封装 API，不是 Vue 组件，不挂载到当前 DOM 树，所有 CSS 选择器（包括 :deep(.uni-modal)、.uni-modal__bd、全局覆盖）在小程序和 App 端基本无效。iOS 微信、支付宝、App 端会直接忽略你写的样式，安卓部分机型偶有生效纯属巧合，不可依赖。
常见错误现象：
- 在
content里写<p style="color:red">xxx</p>，H5 能看到红色，iOS 上字体颜色/行高/内边距全被重置 - 试图用
page.json或app.vue加.uni-modal类，只对 H5 生效，其他端白屏或报错 - 按钮文字强制大写（Android）、遮罩点击仍可关闭（小程序 showCancel: false 时）、TabBar 页面上弹窗被截断——这些都不是样式问题，是平台限制
三端一致的方案：用 .nvue 页面模拟“伪弹窗”
真正可控的方式是跳转一个透明背景的 .nvue 页面，本质是“路由级弹窗”。关键不在内容，而在 pages.json 配置：
-
"navigationStyle": "custom"：隐藏原生导航栏 -
"background": "transparent"必须配合"backgroundColor": "rgba(0,0,0,0.5)"，否则 iOS 下变黑底 -
"popGesture": "none"：禁用右滑返回，避免用户误操作中断逻辑 -
app-plus下必须单独配animationType（如"fade-in"），H5 和小程序需另配过渡动画
.nvue 文件内不能用 margin: auto 居中，得用 flex + absolute 手动定位；传参走 URL query（如 ?title=xxx&content=yyy），避免跨页面通信丢失；回调必须用 uni.$emit/uni.$on，不能依赖 success 回调——因为这不是 API 调用，是路由跳转。
封装 Vue 组件 Modal：v-model 是坑，show + @close 才稳
如果不想跳页，推荐新建 components/custom-modal.vue，但注意：v-model 在 uni-app 中默认绑定 value prop 和 input 事件，弹窗不需要双向输入值，强行套用会导致状态不同步、关闭后仍触发打开逻辑。
正确做法：
- 只用
showprop（布尔值）控制显隐，子组件内部不维护show状态 - 关闭时
$emit('close')，由父组件统一处理显隐逻辑 - 遮罩层必须设
pointer-events: auto，否则点击无效；H5 需document.body.style.overflow = 'hidden'禁滚动，App 端要加position: fixed+ 高z-index（如 9999） - 动画别用
<transition></transition>，App 端对opacity/transform支持不一致，推荐uni.createAnimation手动控制
尺寸、安全区、平台差异这些细节最容易漏
所有尺寸一律用 rpx，px 在 App 端会按物理像素渲染，导致边框粗、文字挤；iPhone 全面屏底部按钮容易被手势条挡住，必须用 env(safe-area-inset-bottom) 做兜底适配；z-index 在 App 端数值要远高于 H5（比如设 9999），否则可能被原生导航栏盖住；遮罩层的 catchtouchmove 只在微信小程序生效，App/H5 要靠其他方式阻止穿透。
