微信小程序自定义弹出框

网上搜了一下感觉都没有好用的自定义弹框就自己手写了一个,方便以后CV

弹框可以点击按钮关闭，也可以点击空白关闭

代码很简单

wxml

<view bindtap="submit">点击显示</view><view class="mask" bindtap="preventTouchMove" wx:if="{{showModal}}"></view><view class="mask1" wx:if="{{showModal}}"><view class="modalDlg"><view style="height: 500rpx;"></view><button bindtap="showHide">点我可以关掉对话框</button></view></view>

wxss

.mask{width: 100%;height: 100%;position: fixed;top: 0;left: 0;background: #000;opacity: 0.7;}.mask1{position: absolute;width: 100%;top: 20%;}.modalDlg{position: relative;z-index: 9999;height: 700rpx;background-color: white;border-radius: 36rpx;}

js

data: {showModal: false},// 点击弹框submit: function() {this.setData({showModal: true})},// 点击遮蔽层隐藏preventTouchMove: function() {this.setData({showModal: false})},//点击隐藏showHide: function() { this.setData({showModal: false})},