方法一：
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:
100
rpx;
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:
540
rpx;
overflow:
hidden;
position:
fixed;
top:
50%;
left:
0;
z-index:
9999;
background:
#fff;
margin:
-180
rpx
105
rpx;
border-radius:
36
rpx;
}
.modal-title {
padding-top:
50
rpx;
font-size:
36
rpx;
color:
#030303;
text-align:
center;
}
.modal-content {
padding:
50
rpx
32
rpx;
}
.modal-input {
display:
flex;
background:
#fff;
border-bottom:
2
rpx
solid
#ddd;
border-radius:
4
rpx;
font-size:
28
rpx;
}
.input {
width:
100%;
height:
82
rpx;
font-size:
28
rpx;
line-height:
28
rpx;
padding:
0
20
rpx;
box-sizing:
border-box;
color:
#333;
}
input-holder {
color:
#666;
font-size:
28
rpx;
}
.modal-footer {
display:
flex;
flex-direction:
row;
height:
86
rpx;
border-top:
1px
solid
#dedede;
font-size:
34
rpx;
line-height:
86
rpx;
}
.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();
}
方法一样式修改麻烦，但是代码简单