微信小程序弹出可填写框两种方法

方法一：

  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();

}

方法一样式修改麻烦，但是代码简单