效果图
实现代码
<view class="mask" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view>
<view class="modalDlg" wx:if="{{showModal}}">
<text>欢迎来到模态对话框~</text>
<button bindtap="go">确认</button>
<button bindtap="no">取消</button>
</view>
<button bindtap="submit">{{btnName}}</button>
.mask{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
z-index: 9000;
opacity: 0.7;
}
.modalDlg{
width: 580rpx;
height: 620rpx;
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;
}
data: {
showModal: false,
btnName: "点我弹窗",
},
go: function () {
this.setData({
showModal: false,
btnName: "点击了确认"
})
},
no: function () {
this.setData({
showModal: false,
btnName: "点击了取消"
})
},