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标签造成的穿透比较特殊需要对该标签进行处理