Recently, in the implementation of a small function, when clicking the button, an information layer will pop up from the right side. At the same time, the information layer will appear together with the mask layer, so the animation function of the applet and the appearance of the button clicked by the applet and the hidden mask layer are separately written as a demo.

This article is mainly to realize the appearance and hiding of the mask layer by clicking the button, which is often used in many practical applications. It is mainly a float layer.

wxml:

<text class='up' bindtap='showRule'>Click pop up</text>
<view class="float {{isRuleTrue?'isRuleShow':'isRuleHide'}}">
  <view class='floatContent'>
    //I am the content
    <image src='../../images/del.png' class='ruleHide' bindtap='hideRule'>X</image>
  </view>
</view>

wxss

.up {
  display: block;
  border: 1px solid #b7b8b5;
  width: 200rpx;
  text-align: center;
  line-height: 60rpx;
  height: 60rpx;
  font-size: 30rpx;
  border-radius: 30rpx;
  margin-top: 20rpx;
}

.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;
}

js

Page({
  data: {},
  onLoad: function () {

  },
  //Open transparency layer
  showRule: function () {
    this.setData({
      isRuleTrue: true
    })
  },
  //Turn off transparency layer
  hideRule: function () {
    this.setData({
      isRuleTrue: false
    })
  },
})

The effect is like this. The interface css is not written in detail, so it's relatively simple. Let's look at it together. This is the main function