遮罩层+垂直水平居中层（源码）（记录）

前端路上的net

于 2023-02-17 11:48:39 发布

阅读量95

点赞数

分类专栏：前端学习文章标签： html5 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/qq_35878240/article/details/129082636

版权

前端学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

经常会遇到点击按钮后弹出遮罩层，遮罩层上有个垂直水平居中的层，今天做个笔记，方便后面复制（干货啊），话不多说，用微信小程序举例，h5也是一样的。

上效果图：demo将就看下，自己化妆。

上菜（代码）：

遮罩层+垂直水平居中层

<!-- 遮罩层 -->
<view class='maskDiv' wx:if='{{isShowMask}}'></view>
<view class='mainDiv' wx:if='{{isShowMask}}'>
    <view style='text-align: center;margin-top: 3vw;'>隐私政策</view>
    <view style="font-size: 4vw;margin-top: 6vw;">
    <view style='padding: 0 2vw;'>收集姓名、手机号码、身份证仅仅用于用户注册及后续的实名业务办理，无其它用途。。。。。。</view></view>
    <view bindtap='readClick' style='background: #ddd; margin: 8vw 30vw; text-align: center; border-radius: 5vw;'>已读</view>
  </view>

.maskDiv {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 100;
}
.mainDiv {
  position: absolute;
  margin: auto;
  height: 42vw;
  left: 10vw;
  right: 10vw;
  top: 0;
  bottom: 0;
  background: #fff;
  z-index: 110;
  width: 80vw;
  border-radius: 4.3vw;
}

data: {
    isShowMask:false
  },
  readClick(){
    this.setData({
      isShowMask:false
    })
  },
//按钮上写一个时间，让遮罩弹出
  showModel(){
    this.setData({
      isShowMask:true
    })
  },