![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/701c17a9da1adbe9a432c6160d21f974.png)
<view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{dialogShow}}"></view>
<view class="modal-dialog" wx:if="{{dialogShow}}">
<view class="modal-content">
是否确认删除本条血糖记录?
</view>
<view class="modal-footer">
<view class="btn-cancel" bindtap="onCancel" data-status="cancel">取消</view>
<view class="btn-confirm" bindtap="handleDialogTap">确认</view>
</view>
</view>
</view>
/*删除弹框*/
.show-btn {
margin-top: 100rpx;
color: #22cc22;
}
.modal-mask {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
opacity: 0.5;
overflow: hidden;
z-index: 9000;
color: #fff;
}
.modal-dialog {
width: 540rpx;
overflow: hidden;
position: fixed;
top: 50%;
left: 50%;
z-index: 9999;
background: #f9f9f9;
transform: translate(-50%, -70%);
border-radius: 20rpx;
}
.modal-title {
padding-top: 50rpx;
font-size: 36rpx;
color: #030303;
text-align: center;
}
.modal-content {
padding: 65rpx 32rpx;
text-align: center;
color: #333333;
}
.modal-input {
display: flex;
background: #fff;
border: 2rpx solid #ddd;
border-radius: 4rpx;
font-size: 28rpx;
}
.input {
width: 100%;
height: 82rpx;
font-size: 28rpx;
line-height: 28rpx;
padding: 0 20rpx;
box-sizing: border-box;
color: #333;
}
input-holder {
color: #666;
font-size: 28rpx;
}
.modal-footer {
display: flex;
flex-direction: row;
height: 86rpx;
border-top: 1px solid #dedede;
font-size: 30rpx;
line-height: 86rpx;
}
.btn-cancel {
width: 50%;
color: #666;
text-align: center;
border-right: 1px solid #dedede;
}
.btn-confirm {
width: 50%;
color: #6AC8D6;
text-align: center;
}
// 点击删除按钮
handleDel() {
this.setData({
dialogShow: true
})
},
preventTouchMove: function () {
},
hideModal: function () {
this.setData({
dialogShow: false
})
},
onCancel: function () {
this.hideModal();
},
handleDialogTap(e) {
wxPost(request.delGlu, {
id: this.data.id
})
.then(res => {
wx.navigateBack();
})
},
参考