<!--index.wxml--><button class="show-btn" bindtap="showDialogBtn">弹窗</button><!--弹窗--><view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view><view class="modal-dialog" wx:if="{{showModal}}"><view class="modal-title">添加数量</view><view class="modal-content"><view class="modal-input"><input placeholder-class="input-holder" type="number" maxlength="10" bindinput="inputChange" class="input" placeholder="请输入数量"></input></view></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>
/**index.wxss**/.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: 0;z-index: 9999;background: #f9f9f9;margin: -180rpx 105rpx;border-radius: 36rpx;}.modal-title {padding-top: 50rpx;font-size: 36rpx;color: #030303;text-align: center;}.modal-content {padding: 50rpx 32rpx;}.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: 34rpx;line-height: 86rpx;}.btn-cancel {width: 50%;color: #666;text-align: center;border-right: 1px solid #dedede;}.btn-confirm {width: 50%;color: #ec5300;text-align: center;}
//获取应用实例var app = getApp()Page({data: {showModal: false,},onLoad: function () {},/*** 弹窗*/showDialogBtn: function () {this.setData({showModal: true})},/*** 弹出框蒙层截断touchmove事件*/preventTouchMove: function () {},/*** 隐藏模态对话框*/hideModal: function () {this.setData({showModal: false});},/*** 对话框取消按钮点击事件*/onCancel: function () {this.hideModal();},/*** 对话框确认按钮点击事件*/onConfirm: function () {this.hideModal();}})
