uniapp中uni.showToast，uni.showModal层级问题

在UniApp 跨端开发实践中，前端开发者常会遇到原生交互组件层级管理难题：当页面存在固定定位（fixed）元素或第三方弹窗时，uni.showToast轻提示与uni.showModal模态框易被高权重组件覆盖，导致核心交互失效。传统方案尝试局部调整z-index往往收效甚微，根源在于UniApp框架 对全局组件样式的特殊作用域机制。

模态框被弹出层组件覆盖

当我尝试在这个页面局部调整z-index时，并不能解决这样的问题，于是我在App.vue 中添加了z-index调整显示层级，发现该问题可以被解决！

//让uni.showToast提示信息在最上层显示
uni-toast{
   z-index: 19999 !important;
}

uni.showModal同理

//让uni.showModal提示框在最上层显示
  uni-modal{
      z-index:19999 !important;
  }

即可解决uni.showToast和Uni.showModal的层级在下面，被上面的层级挡住的问题。

uni.previewImage调整z-index层级

* uni.previewImage H5 端 z-index 修正

* uni-h5 源码将图片预览 div 硬编码为 zIndex: 999（内联样式），

* 挂载于 #u-a-p 根节点内， 必须用 !important 覆盖，使预览层始终位于最顶层。

#u-a-p,
#u-a-p > div {
  z-index: 11501 !important;
}

转载自 CSDN-专业IT技术社区

原文链接：https://blog.csdn.net/qq_63358859/article/details/169363088