wxml
<view bindtap="showRule">点击出现弹窗</view> <!-- 弹窗 --> <view class="cover {{isRuleTrue?'isRuleShow':'isRuleHide'}}"> <view class="window"> <image class="PopupWindowImg1" src="../../images/sendCardImg.png"></image> <view class="closeBox" bindtap="hideRule"> <image class="close" src="../../images/colse.png"></image> </view> <view class="title"> <view>恭喜您获得一张优惠券</view> <view>快去使用吧！</view> </view> <navigator open-type="navigate" hover-class="none" url="{{toDiscount}}"> <image class="PopupWindowImg2" src="../../images/lookDiscount.png" mode="widthFix"></image> </navigator> </view> </view>wxss
/* 弹窗 */ .cover { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: rgba(0, 0, 0, .8); z-index: 2; padding-top: 300rpx; padding-left: 75rpx; z-idnex: 500; overflow: hidden; } .isRuleShow { display: block; } .isRuleHide { display: none; } .window { width: 460rpx; background: #ffffff; border-radius: 10px; padding: 24rpx 70rpx 40rpx 70rpx; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; } .closeBox { display: flex; align-items: center; justify-content: center; width: 40rpx; height: 40rpx; position: absolute; top: 20rpx; right: 20rpx; } .close { width: 24rpx; height: 24rpx; } .PopupWindowImg1 { width: 450rpx; height: 272rpx; position: absolute; top: -207rpx; left: 70rpx; } .title { display: block; text-align: center; font-size: 30rpx; font-weight: 600; margin-top: 90rpx; margin-bottom: 50rpx; color: #323332; } .PopupWindowImg2 { display: inline-block; width: 200rpx; }js
//显示弹窗 showRule: function () { this.setData({ isRuleTrue: true }) }, //关闭弹窗 hideRule: function () { this.setData({ isRuleTrue: false })注意：
穿透问题（一个是灭有滑动的穿透问题，一个是有滑动穿透问题）
textarea标签造成的穿透比较特殊需要对该标签进行处理
