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

<view class='pop_wx_er'>

    <view>ddddddddddddd</view>

    <view>ddddddddddddd</view>

    <view>ddddddddddddd</view>

    <view>ddddddddddddd</view>

    <view>ddddddddddddd</view>

    <view>ddddddddddddd</view>

    <view>ddddddddddddd</view>

    <view>ddddddddddddd</view>

    <view>ddddddddddddd</view>

    <view>ddddddddddddd</view>

    <view>ddddddddddddd</view>

    <view>ddddddddddddd</view>

    <view>ddddddddddddd</view>

    <view>ddddddddddddd</view>

    <view>ddddddddddddd</view>

    <view>ddddddddddddd</view>

    <view>ddddddddddddd</view>

    <view>ddddddddddddd</view>

    <view>ddddddddddddd</view>

    <view>ddddddddddddd</view>

    <view>ddddddddddddd</view>

    <view bindtap='click'>试试</view>

    <view class='rgb'hidden="{{hiddenName}}">

        <view class='code_block'>

    <image src='/assets/img/b8.png'class='code_img'bindtap='hidden'></image>

        <text class='code_text'>扫码进入商城</text>

    </view>

    </view>

</view>

　

.pop_wx_er{

   background-color: #35b4ed;

   top: 0;

   width: 100%;

   height:100%;

}

.pop_wx_er .rgb{

    position: fixed;

    z-index: 99;

    top:0;

    width: 100%;

    height: 100%;

    background:rgba(0, 0, 0, 0.5);

}

.pop_wx_er .rgb .code_block{

    width: 650rpx;

    height: 700rpx;

    border-radius: 16rpx;

    background-color: white;

    margin: 250rpx 50rpx;

    text-align: center;

}

.pop_wx_er .rgb .code_block .code_img{

    width: 500rpx;

    height: 500rpx;

    margin: 90rpx 75rpx 0 75rpx;

}

.pop_wx_er .rgb .code_block .code_text{

    font-size: 28rpx;

    color: #666666;

}

js里就是简单的点击事件了

this.setData({hiddenName: !this.data.hiddenName})

初始值就是

hiddenName: true