小程序开发root-portal弹窗组件

在我们布局的时候经常会遇到以下问题:

在制作一个弹窗的时候会出现因为有元素设置的z-index层级比遮罩层高,导致遮罩层没办法完全遮住页面,下面就是一个例子

wxml:

xml 复制代码
<view>
  <view class="box1"></view>
  <view class="box2">
    <view class="mask"></view>
  </view>
</view>

wxcss:

css 复制代码
.box1{
  position: relative;
  width: 200rpx;
  height: 200rpx;
  background-color: violet;
  z-index: 10;
}
.box2{
  position: relative;
  top: -100rpx;
  left: 100rpx;
  width: 400rpx;
  height: 400rpx;
  background-color: palevioletred;
  z-index: 9;
}
​
.box2 .mask{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10000;
}

效果:

那出现这种情况的原因是什么呢?

因为box1的z-index比box2的z-index大,所以不管mask的z-index多大都会被box1压着。

那我们应该怎么解决这个问题呢?

有两种处理方式:

①可以将box2删除层级z-index或者删除box2,但是这种处理方式会改变原来的页面布局

②使用root-portal组件

用root-portal标签把遮罩层包裹住:

xml 复制代码
<view>
  <view class="box1"></view>
  <view class="box2">
    <root-portal>
       <view class="mask"></view>
    </root-portal>
  </view>
</view>

但是要注意,因为root-portal使整个子树从页面中脱离出来,类似于在 CSS 中使用 fixed position 的效果。主要用于制作弹窗、弹出层等。所以现在如果还是在原来的局部页面wxss中设置样式是没有任何效果的,应该在全局的app.wxss中设置样式:

css 复制代码
.mask{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10000;
}

现在就实现遮罩层的效果了:

相关推荐
像风一样自由20202 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem2 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊2 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术3 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing3 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止3 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall3 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴3 小时前
简单入门Python装饰器
前端·python
袁煦丞4 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作
天天扭码4 小时前
从图片到语音:我是如何用两大模型API打造沉浸式英语学习工具的
前端·人工智能·github