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

<view class="modalDlg" wx:if="{{showModal}}"> <view class='close_mask' bindtap="close_mask">X</view> <input class='recharge_amount' type='text' placeholder='充值金额' maxlength="8" value='{{recharge_amount}}'></input> <button class='save_money' type='submit'>立即充值</button></view> <button class='recharge' bindtap="submit">充值</button><view class="mask" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view>

js:

// 点击充值弹窗 submit: function () { this.setData({ showModal: true }) }, preventTouchMove: function () { }, close_mask: function () { this.setData({ showModal: false }) },

CSS:

.mask { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #000; z-index: 9000; opacity: 0.7;} .modalDlg { width: 580rpx; height: 450rpx; position: fixed; top: 50%; left: 0; z-index: 9999; margin: -370rpx 85rpx; background-color: #fff; border-radius: 36rpx; display: flex; flex-direction: column; align-items: center;} .recharge_amount { color: #aaa; width: 450rpx; height: 80rpx; background: #f1f1f1; text-align: center; border-radius: 12rpx; margin-top: 56rpx; text-indent: 0;} .save_money { color: #fff; width: 270rpx; height: 80rpx; line-height: 80rpx; background: #d95155; text-align: center; border-radius: 12rpx; margin-top: 80rpx; font-size: 28rpx; text-indent: 0em;} .close_mask { color: #000; position: relative; left: 40%; font-size: 32rpx;}

效果图：

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