uni-app uni.showModal背景颜色不可控

信息类别	信息内容
产品分类	uniapp/App
PC开发环境	Windows
PC操作系统版本	win11
HBuilderX类型	正式
HBuilderX版本	3.99
手机系统	Android
手机系统版本	Android 14
手机厂商	小米
手机机型	红米K60
页面类型	vue
vue版本	vue2
打包方式	云端
项目创建方式	HBuilderX

示例代码：

uni.showModal({  
    content: '确定要退出登录吗？',  
    success: e => {  
        if (e.confirm) {  
            uni.reLaunch({  
                url: '/pages/login/index'  
            });  
        }  
    }  
});

操作步骤：

uni.showModal({  
    content: '确定要退出登录吗？',  
    success: e => {  
        if (e.confirm) {  
            uni.reLaunch({  
                url: '/pages/login/index'  
            });  
        }  
    }  
});

预期结果：

背景是白色

实际结果：

不稳定，有的手机背景是白色，有的是粉黄色

bug描述：

同一个应用，两台红米K60手机，uni.showModal弹窗背景色不同，如下图所示

sinazl 1楼•19 天前

这个应该是Android的动态颜色（从壁纸提取主题色），你试试换壁纸如果这个背景色也跟着变的话就不用管了

h691938207 2楼•19 天前

看这个demo更形象点，点击左下角切换颜色或壁纸，主题色也跟着变化

wuwangju 3楼•19 天前

这不是uniapp干的，是各个厂商平台默认的模态弹窗样式。包括ios的也是一样如果想都完全一样，可以自定义组件

gougou168 4楼•19 天前

在 uni-app 中，uni.showModal 是一个常用的 API，用于显示模态对话框。不过，uni.showModal 的背景颜色是由系统或平台控制的，开发者无法直接通过 API 参数来修改其背景颜色。这是因为不同平台（如 iOS、Android、微信小程序等）对模态对话框的样式有不同的默认设置。

如果你需要自定义模态对话框的背景颜色，可以考虑以下几种替代方案：

1. 使用自定义组件

你可以自己开发一个自定义的模态对话框组件，通过 uni-popup 或其他 UI 框架（如 uView）来实现。这样可以完全控制对话框的样式，包括背景颜色。

示例代码：

<template>
  <view>
    <button @click="showCustomModal">显示自定义模态框</button>
    <custom-modal v-if="showModal" @close="closeModal" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      showModal: false,
    };
  },
  methods: {
    showCustomModal() {
      this.showModal = true;
    },
    closeModal() {
      this.showModal = false;
    },
  },
};
</script>

自定义组件 custom-modal.vue：

<template>
  <view class="modal-overlay" @click="closeModal">
    <view class="modal-content">
      <text>这是自定义模态框</text>
      <button @click="closeModal">关闭</button>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    closeModal() {
      this.$emit('close');
    },
  },
};
</script>

<style>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); /* 自定义背景颜色 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  width: 80%;
  max-width: 300px;
}
</style>

2. 使用 uni-popup 插件

uni-popup 是 uni-app 官方提供的一个弹出层组件，支持自定义内容和样式。

安装：

npm install [@dcloudio](/user/dcloudio)/uni-ui

使用示例：

<template>
  <view>
    <button @click="showPopup">显示弹出层</button>
    <uni-popup ref="popup" type="center" background-color="rgba(0,0,0,0.5)">
      <view class="popup-content">
        <text>这是自定义弹出层</text>
        <button @click="closePopup">关闭</button>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import uniPopup from '[@dcloudio](/user/dcloudio)/uni-ui/lib/uni-popup/uni-popup.vue';

export default {
  components: { uniPopup },
  methods: {
    showPopup() {
      this.$refs.popup.open();
    },
    closePopup() {
      this.$refs.popup.close();
    },
  },
};
</script>

<style>
.popup-content {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  width: 80%;
  max-width: 300px;
}
</style>