微信小程序的模态框制作（最详细）

//wxml
view class="modal-dialog" wx:if="{{showModal}}" bindtap='hidepopup'>
    <view class="screen" catchtap="stop">
       </view>
</view>

//wxss
/* 弹出层 */
 
.modal-dialog {
  overflow: hidden;
  position: fixed;
width: 100%;
height: 100%;
  background: #f9f9f9;
  border-radius: 30rpx; 
  z-index: 2;
}
/* 内置盒子 */
.screen{
  box-sizing: border-box;
  width: 90%;
  margin: 15% auto;
  height: 75%;
}

//js
// 模态框显示
  
  popup: function (e) {
     this.setData({
       showModal: true
     })
   },
   // 模态框隐藏
    
   hidepopup: function () {
     this.setData({
       showModal: false
     });
   },
//  阻止冒泡，谨慎删除
stop(){
},