解决uniapp中uni.showToast和uni.showModal被挡住的方案

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

如下图所示，提示信息和模态框被挡住了（如果弹出层高度较高，提示信息和模态框将完全被覆盖），只能把弹出层关闭才能看到提示信息，操作模态框。

提示信息被弹出层组件覆盖

模态框被弹出层组件覆盖

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

在根目录App.vue中添加css样式

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

uni.showModal同理

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

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