uniapp tui-modal 的层级比 tabbar 低如何解决？

在使用uniapp开发时，tui-modal弹窗的层级(z-index)比底部tabbar低，导致弹窗被遮挡。请问如何调整tui-modal的层级使其能正常显示在tabbar上方？尝试过修改组件的z-index属性但无效，是否有其他解决方案？

2 回复

使用uni-app的cover-view或cover-image组件包裹tui-modal，或通过z-index调整层级。若仍无效，可尝试在page的style中设置position: relative并提升z-index。


在 uni-app 中，当使用 tui-modal 组件时，若其层级低于 tabbar，可通过以下方法解决：

1. 调整 z-index

确保 tui-modal 的 z-index 值大于 tabbar 的层级（通常 tabbar 的 z-index 为 9999 或 10000）：

.tui-modal-class {
  z-index: 10001 !important;
}

2. 使用 uni-popup 替代

uni-popup 组件默认层级较高，可覆盖 tabbar：

<uni-popup ref="popup" type="center">
  <view>弹窗内容</view>
</uni-popup>

this.$refs.popup.open();

3. 动态隐藏 tabbar

在弹窗显示时隐藏 tabbar：

// 显示弹窗时
uni.hideTabBar();

// 关闭弹窗时
uni.showTabBar();

4. 使用 position: fixed

确保弹窗样式为固定定位：

.tui-modal-class {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

注意事项：

  • 检查弹窗父元素是否包含 overflow: hidden 或低 z-index。
  • 若使用第三方 UI 库，查阅文档确认是否有层级配置项。

选择适合方案即可解决问题。

回到顶部