微信小程序中自定义模态框

由于获取 wx.getUserInfo （获取微信个人信息接口）接口后续将不再出现授权弹窗，所以我们为了以后的使用在使用的是时候需要用户点击某个按钮才能获取到微信用户的头像信息等信息。
所以我们需要自己写一个自定义模态框：wxml
这里.modal-dialog内的内容就可以随便修改了，根据自己需求填写

<!-- 模态框 -->
<view class="modal-mask" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view>
<view class="modal-dialog" wx:if="{{showModal}}">
  <view class="modal-title">需要您的授权</view>
  <view class="modal-content">
    <view class="modal-input">
      <view>
        为了提供更好的服务
      </view>
      <view>
      请在稍后的提示框中点击“允许”
      </view>
       <image src="/assets/banner/tip.png" class='tipimg' mode='aspectFit'></image>
    </view>
  </view>
  <view class="modal-footer">
    <button open-type="getUserInfo" bindgetuserinfo="getUserInfo" class='btn-confirm'> 我知道了 </button>
  </view>
</view>

wxss:

.modal-mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.5;
  overflow: hidden;
  z-index: 9000;
  color: #fff;
}

.modal-dialog {
  width: 540rpx;
  overflow: hidden;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 9999;
  background: #f9f9f9;
  /* margin: -180rpx 105rpx; */
  border-radius: 36rpx;
}

.modal-title {
  padding-top: 50rpx;
  font-size: 36rpx;
  color: #030303;
  text-align: center;
}

.modal-content {
  padding: 50rpx 32rpx;
}
.modal-input{
    font-size: 28rpx;
    text-align: center;
}
.modal-input .tipimg{
    height: 250rpx;
    width:100%;
}

input-holder {
  color: #666;
  font-size: 28rpx;
}

.modal-footer {
  display: flex;
  flex-direction: row;
  height: 86rpx;
  border-top: 1px solid #dedede;
  font-size: 34rpx;
  line-height: 86rpx;
}

.btn-cancel {
  width: 50%;
  color: #666;
  text-align: center;
  border-right: 1px solid #dedede;
}

.btn-confirm {
  width: 100%;
  color: #ec5300;
  text-align: center;
}

js:

Page({
  data:{
          showModal:false,
  },
 preventTouchMove: function () {
    },
 getUserInfo: function (e) {
        if (e.detail.userInfo) {
           //这里如果授权成功就可以获取到用户的信息了
        }

    },
})