效果图：
多种触发条件使用同一个弹窗：
*.js触发处：
this.setData({
isWrong:true,
wrongtap:1,
dialogWord:"wrong",
wrongDec:"答案错误，是否向好友求助？"
})
*.wxml布局：
<view class="wrongDialog" wx:if="{{isWrong}}">
<view class="box">
<image class="bg" src="../../images/wrong_bg.png">
</image>
<view class="main">
<view class="wrong1">{{wrongDec}}</view>
<view class="wrong2">
<block wx:if="{{wrongtap == 1}}">
<view class="wrongBtnBox">
<view class="wrongBtn">
<!--答案错误取消-->
<image bindtap='wrongQx' src="../../images/wrongQx.png" mode="aspectFit" />
</view>
<view class="wrongBtn">
<!--答案错误确定-->
<image src="../../images/wrongOk.png" mode="aspectFit"></image>
<button class='shareOk' data-word="{{dialogWord}}" open-type="share" bindtap='wrongOk'></button>
</view>
</view>
</block>
<block wx:if="{{wrongtap == 2}}">
<view class="wrongBtnBox">
<view class="wrongBtn">
<!--提示取消-->
<image bindtap='tishiQx' src="../../images/wrongQx.png" mode="aspectFit" />
</view>
<view class="wrongBtn">
<!--提示确定-->
<image src="../../images/wrongOk.png" mode="aspectFit"></image>
<button class='shareOk' data-word="{{dialogWord}}" open-type="share" bindtap='tishiOk'></button>
</view>
</view>
</block>
<block wx:if="{{wrongtap == 3}}">
<view class="wrongBtnBox">
<view class="wrongBtn">
<!--点击金币取消-->
<image bindtap='goldQx' src="../../images/wrongQx.png" mode="aspectFit" />
</view>
<view class="wrongBtn">
<!--点击金币确定-->
<image src="../../images/wrongOk.png" mode="aspectFit"></image>
<button class='shareOk' data-word="{{dialogWord}}" open-type="share" bindtap='goldOk'></button>
</view>
</view>
</block>
</view>
</view>
</view>
*.wxss布局：
.wrongDialog {
position: fixed;
z-index: 100;
left: 0;
top: 0;
width: 100%;
height: 83%;
background-color: rgba(0, 0, 0, 0.5);
}
.wrongDialog .box {
width: 80%;
height: 364rpx;
position: absolute;
left: 10%;
top: 30%;
z-index: 9
}
.wrongDialog .box .bg {
width: 90%;
height: 100%;
margin: auto;
}
.wrongDialog .box .main {
position: absolute;
left: 50%;
top: 0;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
width: 522rpx;
height: 100%;
}
.wrongDialog .box .main .wrong1 {
color: #a65d1c;
font-size: 30rpx;
padding: 140rpx 0 0 0;
text-align: center;
}
.wrongDialog .box .main .wrong2 .wrongBtnBox {
width: 100%;
height: 100rpx;
vertical-align: middle;
text-align: center;
margin-top: 13%
}
.wrongDialog .box .main .wrong2 .wrongBtnBox .wrongBtn {
position: relative;
width: 160rpx;
height: 100rpx;
display: inline-block;
margin: 0 20rpx;
}
.wrongDialog .box .main .wrong2 .wrongBtnBox .wrongBtn image{
vertical-align: middle;
display: inline
}
.wrongDialog .box .main .wrong2 .wrongBtnBox .wrongBtn .shareOk{
position: absolute;
display: block;
left: 0;
top:0;
width: 100%;
height: 100%;
background: transparent;
}
button::after{
border:none;
}