小程序点击按钮出现和隐藏遮罩层

.js

// pages/message/message.js
Page({
  data: {},
  onLoad: function () {

  },
  //打开透明层
  showRule: function () {
    this.setData({
      isRuleTrue: true
    })
  },
  //关闭透明层
  hideRule: function () {
    this.setData({
      isRuleTrue: false
    })
  },
})

.wxml:

 
        
        签到
    


  
    签到成功!
    X
  

.wxss

/* pages/message/message.wxss */


.isRuleShow {
  display: block;
}

.isRuleHide {
  display: none;
}

.float {
  height: 100%;
  width: 100%;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2;
  top: 0;
  left: 0;
}

.floatContent {
  padding: 20rpx 0;
  width: 80%;
  height: 300rpx;
  background: #fff;
  margin: 40% auto;
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  position: relative;
}

.ruleHide {
  height: 60rpx !important;
  width: 60rpx !important;
  position: absolute;
  top: -9rpx;
  right: -9rpx;
}
.title1{
  font-size: 30rpx;

}
.btn{
  font-size: 30rpx;
  width: 160rpx;
  height: 68rpx;
  margin-top: 200rpx;
}