微信小程序 自制模态框

wxml

<view class='modal-mask' bindtap='hideModal' catchtouchmove="true"></view>
<view class='modal-dialog' catchtouchmove="true" wx:if='{{showModal}}'>
    // 这里填充模态框内要展示的内容
<view>

js

Page({
  /**
   * 页面的初始数据
   */
  data: {
    showModal: true
  },
 
  onLoad: function () {
    
  },
 
  hideModal() {
    this.setData({
      showModal: false
    });
  } 
})

wxss

.modal-mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.5;
  overflow: hidden;
  z-index: 9998;
}
 
.modal-dialog {
  width: 600rpx;    //模态框的宽
  height: 800rpx;    //模态框的高
  position: fixed;
  top: 13%;
  left: 10%;    //top、left控制模态框的位置
  //如要居中
  //top: 50%;
  //left: 50%;
  //transform: translate(-50%,-50%);
  z-index: 9999;
  background: #fff;
  border-radius: 20rpx;
  display: flex;
  flex-flow: column nowrap;    //子元素纵向排列，不换行
  justify-content: flex-start;
  align-items: center;
}

这只是一个简单的例子，主要是wxml和wxss部分，至于显示和隐藏，根据自己需求来写。