html页面： 

< view class = "container"class = "zn-uploadimg" > < button type = "primary"bindtap = "modalinput" > modal有输入框 < /button> </view > < modal id = "modal"hidden = "{{hiddenmodalput}}"title = "预约信息"confirm - text = "提交"cancel - text = "取消"bindcancel = "cancel"bindconfirm = "confirm" > < input type = ‘text‘placeholder = "姓名："auto - focus / > < input type = ‘number‘placeholder = "电话："auto - focus / > < input type = ‘text‘placeholder = "人数："auto - focus / > < input type = ‘text‘placeholder = "时间："auto - focus / > < /modal> 
js页面：/ / 获取应用实例var app = getApp()Page({ data: { hiddenmodalput: true, //可以通过hidden是否掩藏弹出框的属性，来指定那个弹出框 }, //点击按钮痰喘指定的hiddenmodalput弹出框 modalinput: function() { this.setData({ hiddenmodalput: !this.data.hiddenmodalput }) }, //取消按钮 cancel: function() { this.setData({ hiddenmodalput: true }); }, //确认 confirm: function() { this.setData({ hiddenmodalput: true }) }})

html页面： 

< 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 class="modal-input"><input placeholder-class="input-holder" type="number" maxlength="10" bindinput="inputChange" class="input" placeholder="电话"></input > < /view><view class="modal-input"><input placeholder-class="input-holder" type="number" maxlength="10" bindinput="inputChange" class="input" placeholder="人数"></input > < /view><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 > 

css页面：/**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: #fff; 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 - bottom: 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;}
js页面：/** * 弹窗 */showDialogBtn: function() { this.setData({ showModal: true })},/** * 弹出框蒙层截断touchmove事件 */preventTouchMove: function() {},/** * 隐藏模态对话框 */hideModal: function() { this.setData({ showModal: false });},/** * 对话框取消按钮点击事件 */onCancel: function() { this.hideModal();},/** * 对话框确认按钮点击事件 */onConfirm: function() { wx.showToast({ title: ‘提交成功‘, icon: ‘success‘, duration: 2000 }) this.hideModal();}