本文实例为大家分享了微信小程序实现蒙版弹窗效果的具体代码，供大家参考，具体内容如下

view class=' modaldlg ' wx : if=' { { show modal } } ' view class=' close _ mask ' bind tap=' close _ mask ' x/view input class=' recharge _ amount ' type=' text ' placeholder='充值金额max length=' 8 ' value=' { { recharge _ amount } } /input button class=' save _ money ' type=' submit '立即充值/button/view button class=' recharge ' bind tap=' submit '充值/button view class=' mask ' catch touch move=' prevent touch move ' wx : if=' { { show modal } } '/view js :

//点击充值弹窗提交：函数(){这个。setdata({ showmodal : true })}，preventTouchMove:函数(){ }，close_mask:函数(){这个。setdata({ show modal : false })}，CSS:

/* 点击充值弹窗*/.遮罩{宽度： 100%；高度： 100%;位置：固定；top : 0；左： 0；背景技术： # 000;z指数： 9000；opacity: 0.7 }。modalDlg { width: 580rpx高度： 450 rpx位置：固定；前：名50%；左： 0；z指数： 9999；边距：-370 rpx 85 rpx；背景-color : # fff；边界半径： 36rpx显示： flex flex-方向：柱；align-items:居中；} .充值_金额{ color : # AAA宽度： 450 rpx高度： 80rpx背景# f1f1f1文本对齐：中心；边界半径： 12 rpx页边距-顶部： 56 rpx文本缩进： ^ 0；} .省钱{ color: # fff宽度： 270 rpx高度： 80rpx线高： 80 rpx背景# d95155文本对齐：中心；边界半径： 12 rpx边距-top : 80 rpx；font-size : 28 rpx文本缩进： 0 em} .关闭掩码{ color: # 000相对位置：左： 40%;/*前：-82%；*/font-size 3: 32 rpx；} /*弹窗结束*/效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。