微信小程序自定义分享弹窗

效果图：

多种触发条件使用同一个弹窗：

*.js触发处：

this.setData({

isWrong:true,

wrongtap:1,

dialogWord:"wrong",

wrongDec:"答案错误，是否向好友求助？"

})

 

*.wxml布局：

{{wrongDec}}

 

 

 

 

 

*.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;

}