微信小程序 弹窗(模态框)遮罩层 弹窗右上角按钮关闭

效果图

点击按钮后：

代码 :

maskDemo.wxml

<button bindtap='showRule' style="width:65vw" class="receiveFile">点击弹窗模态框</button>
<!--遮罩层-->
<view class="ruleZhezhao {{isRuleTrue?'isRuleShow':'isRuleHide'}}">
    <view class='ruleZhezhaoContent'>
      <image class="dowicon" src="/images/receive_download.png"></image>
      <input class="inputcode" type="text" placeholder="请输入收件码" bindinput='bindCode'/>  
      <button class="open" style="width:54vw;height:12vw;">打开</button>
      <image src='/images/closeicon.png' class='ruleHide' bindtap='hideRule'></image>
    </view>
  </view>

maskDemo.wxss

.receiveFile {
  margin-top: 20rpx;
  border-radius: 20px;
  background: #fff;
  color: #175acb;
  border: 2rpx solid #175acb;
}
.dowicon{
  width: 68px;
  height: 68px;
  margin-top: 50px;
  margin:20px 117px 0px 122px;
  text-align: center;
}
.inputcode{
  padding-left: 20rpx;
  height: 40px;
  width: 78%;
  color: #000;
  font-weight: normal;
  background-color: #F6F6FF;
  border: 1px solid rgb(231, 230, 230) ;
  margin: 17px ;
}
.open{
  background-color: #888888;
  border-radius: 30px;
  font-weight: normal;
  color: #fff;
  margin-bottom: 50px;
  margin: 10px 10px 10px 10px ;
}
.ruleHide{
  height: 60rpx!important;
  width: 60rpx!important;
  position: absolute;
  top: 10rpx;
  right: 10rpx;
}
.isRuleShow{
  display: block;
}
.isRuleHide{
  display: none;
}
.ruleZhezhao{
  height: 100%;
  width: 100%;
  position: fixed;
  border: 1px solid springgreen;
  background-color:rgba(0, 0, 0, .5); 
  top: 0;
  left: 0;
  z-index: 999;
}
.ruleZhezhaoContent{
  padding: 56rpx 0px;
  width: 80%;
  background: #fff;
  margin: 20% auto;
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  position: relative;
} 

maskDemo.js

// pages/maskDemo/maskDemo.js
Page({

  /**
   * 页面的初始数据
   */
  data:{
    showView: true
    },
     //打开规则提示
      showRule: function () {
        this.setData({
          isRuleTrue: true
        })
      },
      //关闭规则提示
      hideRule: function () {
        this.setData({
          isRuleTrue: false
        })
      },
  onLoad: function (options) {
  },
  onReady: function () {
  },
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  }
})

小程序官方提供了 wx.showModal 方法，但样式比较固定，不能满足多元化需求