本文实例为大家分享了微信小程序实现蒙版弹窗效果的具体代码,供大家参考,具体内容如下
& lt;视图类=癿odalDlg”天气:如果=皗{showModal}}”比;
& lt;视图类=' close_mask bindtap=癱lose_mask祝辞X
& lt;输入类=' recharge_amount '类型=拔谋尽闭嘉环?充的值金额的最大长度=?”价值=' https://www.yisu.com/zixun/{{recharge_amount}} '祝辞& lt;/input>
& lt;按钮类=' save_money ' type='提交'祝辞立即充值& lt;/button>
& lt;/view>
& lt;按钮类='充电' bindtap=疤峤弧弊４浅渲? lt;/button>
& lt;视图类="面具" catchtouchmove=皃reventTouchMove”天气:如果=" {{showModal}} "祝辞& lt;/view>
js:
//点击充值弹窗
提交:函数(){
this.setData ({
showModal:真
}）
},
preventTouchMove:函数(){
},
close_mask:函数(){
this.setData ({
showModal:假
}）
},
之前
CSS:
/*点击充值弹窗*/.mask {
宽度:100%;
高度:100%;
位置:固定;
上图:0;
左:0;
背景:# 000;
z - index: 9000;
透明度:0.7;
}
.modalDlg {
宽度:580 rpx;
身高:450 rpx;
位置:固定;
上图:50%;
左:0;
z - index: 9999;
保证金:-370 rpx 85 rpx;
background - color: # fff;
border - radius: 36 rpx;
显示:flex;
flex-direction:列;
对齐项目:中心;
}
.recharge_amount {
颜色:# aaa级;
宽度:450 rpx;
身高:80 rpx;
背景:# f1f1f1;
text-align:中心;
border - radius: 12 rpx;
margin-top: 56 rpx;
indent: 0;
}
.save_money {
颜色:# fff;
宽度:270 rpx;
身高:80 rpx;
行高:80 rpx;
背景:# d95155;
text-align:中心;
border - radius: 12 rpx;
margin-top: 80 rpx;
字体大小:28 rpx;
indent: 0 em;
}
.close_mask {
颜色:# 000;
位置:相对;
左:40%;/*:-82%;*/字体大小:32 rpx;
}/*弹窗结束*/之前
效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
