uni-app 3.2.16 版本中 uni.showModal 在H5平台上失效

uni-app 3.2.16 版本中 uni.showModal 在H5平台上失效

开发环境 版本号 项目创建方式
Windows win10 HBuilderX 
产品分类：uniapp/H5

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：win10

HBuilderX类型：正式

HBuilderX版本号：3.2.16

浏览器平台：Chrome

浏览器版本：96.0.4664.45

bug描述：

z-index层级问题  
高于uni组件的层级了，uni组件被遮住。  
自己使用的问题

更多关于uni-app 3.2.16 版本中 uni.showModal 在H5平台上失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 3.2.16 版本中 uni.showModal 在H5平台上失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 3.2.16 版本中，uni.showModal 在 H5 平台失效通常是由于 z-index 层级冲突导致的。uni.showModal 默认的 z-index 为 999，如果页面中存在更高层级的元素（例如自定义组件、第三方库的弹窗等），可能会遮挡模态框。

解决方案：

  1. 检查全局样式：确保没有全局样式将 z-index 设置得过高（例如超过 999）。
  2. 调整 uni.showModal 的 z-index：
    在调用 uni.showModal 时，可通过 CSS 自定义层级。例如：
    uni.showModal({
  title: '提示',
  content: '内容',
  success: (res) => { /* ... */ }
});
// 在 App.vue 或全局样式添加
// .uni-modal { z-index: 9999 !important; }
回到顶部