小程序自定义弹窗【解决点透问题】

1. <view class="wx-popup" hidden="{{ flag }}" catchtouchmove="true" catchtap='onClose'>
        <view class='popup-container'>
             <view class="wx-popup-release-tip" catchtap='onPrevent'>
                 <view class="item">
                      <view class="desc">您的通知已发送成功！</view>
                 </view>
             </view>
             <view class="releaseConfirm">
                  <view class="btn-ok" catchtap='onClose'>知道了</view>
             </view>
        </view>
   </view>
   

   　　

2. .wx-popup {
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.5);
   }
   
   .wx-popup .popup-container {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     z-index: 999;
     width: 640rpx;
     height: 320rpx;
     border-radius: 16rpx;
     overflow: hidden;
     background: #fff;
   }
   
   .wx-popup .popup-container .wx-popup-release-tip {
     display: flex;
     justify-content: center;
     align-items: center;
     flex: 1
   }
   
   .wx-popup .popup-container .wx-popup-release-tip .item {
     display: flex;
     justify-content: center;
     align-items: center;
   }
   
   .wx-popup .popup-container .releaseConfirm {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 30%;
     color: #576b95;
     border-top: 1px solid #f5f5f5;
   }
   
   .wx-popup .popup-container .releaseConfirm .btn-ok {
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #576b95;
     font-size: 16px;
   }
   

   　　

3. data: {
      flag: true 
   }
   
   // 关闭弹出层时触发 == 点击遮罩层和弹框确定按钮时触发
   onClose(e) {
     console.log('e',e)
     this.setData({ 
       flag: true
     });
   },
   
   // 点击弹框提示部分时触发，用于解决点透问题
   onPrevent() {
   //无需任何逻辑
   }