效果如下:

1、wxml

<view class='' bindtap='showMask'>顯示遮罩</view>
<view class="mask" hidden="{{flag}}">
  <view class="maskContent">
    <view>
      <input class='input' placeholder="input" />
    </view>
    <view>
      <input class='input' placeholder="input" />
    </view>   
    <view class='btn'>提交按鈕</view>
  </view>
  <view class="closeImg" bindtap="closeMask">
    <image  class="closeImg_image" src="/images/close.png"></image>
  </view>
</view>
 

2、wxss

/* 設定背景遮罩層樣式 */
.mask {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
/* 設定遮罩內容樣式 */
.maskContent {
  width: 70%;
  background: #fff;
  border-radius: 5px;
  padding: 30rpx;
}
/* 設定關閉按鈕圖片的位置 */
.closeImg {
  position: fixed;
  top: 40rpx;
  right: 40rpx;
}
/* 設定關閉按鈕寬高 */
.closeImg_image {
  width: 50rpx;
  height: 50rpx;
}
.btn{
  width: 80%;
  margin: 20rpx auto;
  background: #ff6600;
  color: #fff;
  line-height: 60rpx;
  font-size: 32rpx;
  text-align: center;
  border-radius: 3px;
}
.input{
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 28rpx;
  padding: 0 10rpx;
  margin: 20rpx 0;
  line-height: 60rpx;
}
 

3、js

Page({
  data: {
    flag: true,
  },
  showMask: function () {
    this.setData({ flag: false })
  },
  closeMask: function () {
    this.setData({ flag: true })
  }
})