<view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view> <view class="modal-dialog" wx:if="{{showModal}}"> <view class="modal-title"><text>!</text></view> <view class="modal-content"> <text>确定删除该商品吗?</text> </view> <view class="modal-footer"> <view class="btn-cancel" bindtap="onCancel" data-status="cancel">取消</view> <view class="btn-confirm" bindtap="onConfirm" data-status="confirm">确定</view> </view> </view>
.modal-mask { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #000; opacity: 0.6; overflow: hidden; z-index: 9000; color: #fff; } .modal-dialog { width: 540rpx; overflow: hidden; position: fixed; top: 50%; left: 0; z-index: 9999; background: #f9f9f9; margin: -180rpx 105rpx; border-radius: 20rpx; } .modal-title { font-size: 36rpx; color: #030303; text-align: center; width:70rpx; height:70rpx; margin:0 auto; margin-top: 16rpx; background:#10aeff; border-radius:50%; } .modal-title text{ font-size:26rpx; line-height: 70rpx; text-align: center; color:#fff; width:70rpx; height:70rpx; } .modal-content { margin:0 auto; padding:24rpx 0 30rpx 0; border-bottom:1px solid #b2b2b2; display: flex; justify-content: center; align-items: center; } .modal-content text{ font-size:30rpx; color:#353535; } .modal-footer { display: flex; height:100rpx; font-size: 30rpx; line-height:100rpx; } .btn-cancel { width: 50%; color: #3388ff; text-align: center; border-right: 1px solid #b2b2b2; } .btn-confirm { width: 50%; color: #3388ff; text-align: center; }
Page({ /** * 页面的初始数据 */ data: { showModal: false, //删除弹框显示隐藏 }, /** * 弹窗 */ showDialogBtn: function () { this.setData({ showModal: true }) }, /** * 弹出框蒙层截断touchmove事件 */ preventTouchMove: function () { }, /** * 隐藏模态对话框 */ hideModal: function () { this.setData({ showModal: false }); }, /** * 对话框取消按钮点击事件 */ onCancel: function () { this.hideModal(); }, /** * 对话框确认按钮点击事件 */ onConfirm: function (e) { this.hideModal(); this.deleteList(e); } })
请发表评论