效果如下:

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 {
  color:rgb(98 189 255)">position: fixed;
  color:rgb(73 238 255)">left: 0;
  color:rgb(255 111 119)">top: 0;
  color:rgb(255 95 0)">right: 0;
  color:rgb(255 211 0)">bottom: 0;
  color:rgb(98 189 255)">background: rgba(0, 0, 0, 0.5);
  color:rgb(253 97 106)">display: flex;
  color:rgb(98 189 255)">justify-content: center;
  color:rgb(98 189 255)">align-items: center;
  color:rgb(98 189 255)">flex-direction: column;
}
/* 设置遮罩内容样式 */
.maskContent {
  color:rgb(255 95 0)">width: 70%;
  color:rgb(98 189 255)">background: #fff;
  color:rgb(98 189 255)">border-radius: 5px;
  color:rgb(253 97 106)">padding: 30rpx;
}
/* 设置关闭按钮图片的位置 */
.closeImg {
  color:rgb(98 189 255)">position: fixed;
  color:rgb(255 111 119)">top: 40rpx;
  color:rgb(255 95 0)">right: 40rpx;
}
/* 设置关闭按钮宽高 */
.closeImg_image {
  color:rgb(255 95 0)">width: 50rpx;
  color:rgb(255 211 0)">height: 50rpx;
}
.btn{
  color:rgb(255 95 0)">width: 80%;
  color:rgb(255 211 0)">margin: 20rpx auto;
  color:rgb(98 189 255)">background: #ff6600;
  color: #fff;
  line-color:rgb(255 211 0)">height: 60rpx;
  font-size: 32rpx;
  text-align: center;
  color:rgb(98 189 255)">border-radius: 3px;
}
.input{
  border: 1px solid #ccc;
  color:rgb(98 189 255)">border-radius: 3px;
  font-size: 28rpx;
  color:rgb(253 97 106)">padding: 0 10rpx;
  color:rgb(255 211 0)">margin: 20rpx 0;
  line-color:rgb(255 211 0)">height: 60rpx;
}

3、js

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