微信小程序----------------------自定义遮罩层

本文转自：

微信小程序中遮罩层的实现

uni-app自定义弹窗，底部页面触摸穿透问题解决方案（精华）

移动端开发遮罩层（弹窗）防止滚动穿透完美解决方案

先把自己用到的方法记录下来

wxml代码

<view class="wrap">
    <!---------------------------------------------------------------------------------1  -->
    <!--页面内容区  -->
    <view class="conts">
        <text class="title1">页面内容->根据自己需求陈列</text>
        <button class="btn" type="primary" catchtap="click">点我</button>
    </view>
    <!----------------------------------------------------------------------------------2  -->
    <!--遮罩层  -->
    <view class="shade"  wx:if="{<!-- -->{shows}}" bindtap='close'></view>
    <!----------------------------------------------------------------------------------3  -->
    <!--弹出面板区域  -->
    <view class="cont" wx:if="{<!-- -->{ shows}}">
        <text class="tit">面板内容->根据自己需求陈列</text>
    </view>
</view>

wxss代码

.wrap{
  height: 1000px;
}
/*-----------------------------1页面内容区样式----------------------------------  */
.title1{
  font-size: 30rpx;
}
.btn{
  font-size: 30rpx;
  width: 160rpx;
  height: 68rpx;
  margin-top: 200rpx;
}
/*-----------------------------遮罩层样式-------------------------------------  */
.shade{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: rgba(0,0,0,0.8);
  opacity: 0.5;
  overflow: hidden;
}   
/*----------------------------面板样式-----------------------------------------  */
.cont {
   width: 600rpx;
   height: 360rpx;
   z-index: 2;
   overflow: hidden;
   position: fixed;
   top: 20%;
   left: 60rpx;  
   font-size: 32rpx; 
   border-radius: 10rpx; 
   border: 1rpx solid greenyellow;
   background-color: white;
}  
.tit{
  color: coral;
}

js代码

Page({
  data: {
    // 一开始遮罩层与面板隐藏
    shows: false,
  },
  // 点击“点我”以后遮罩层与面板显示
  click: function (e) {
    this.setData({
      shows: true,
    })
  },
  // 点击遮罩层，显示的遮罩层与面板又隐藏起来
  close: function () {
    this.setData({
      shows: false,
    })
  },
})