php写一个餐饮的小程序,使用小程序写一个弹窗输入组件

写项目的时候发现小程序没有自带的弹窗输入的组件，只能自己写一个。

1.半透明的遮盖层

遮盖层的样式和显隐事件

wxml代码：

弹窗

wxss代码：.model{

position: absolute;

width: 100%;

height: 100%;

background: #000;

z-index: 999;

opacity: 0.5;

top: 0;

left:0;

}

js代码：/**

* 页面的初始数据

*/

data: {

showModal: false,

},

/**

* 控制遮盖层的显示

*/

eject:function(){

this.setData({

showModal:true

})

}

2.弹窗窗口实现

弹窗窗口的样式和显隐事件

wxml代码：

标题

返回

确定

wxss代码：.modalDlg{

width: 70%;

position: fixed;

top:350rpx;

left: 0;

right: 0;

z-index: 9999;

margin: 0 auto;

background-color: #fff;

border-radius: 10rpx;

display: flex;

flex-direction: column;

align-items: center;

}

.windowRow{

display: flex;

flex-direction: row;

justify-content: space-between;

height: 110rpx;

width: 100%;

}

.back{

text-align: center;

color: #f7a6a2;

font-size: 30rpx;

margin: 30rpx;

}

.userTitle{

font-size: 30rpx;

color: #666;

margin: 30rpx;

}

.wishName{

width: 100%;

justify-content: center;

flex-direction: row;

display: flex;

margin-bottom: 30rpx;

}

.wish_put{

width: 80%;

border: 1px solid;

border-radius: 10rpx;

padding-left: 10rpx;

}

.wishbnt{

width: 100%;

font-size: 30rpx;

margin-bottom: 30rpx;

}

.wishbnt_bt{

width: 50%;

background-color: #f7a6a2;

color: #fbf1e8;

font-size: 30rpx;

border: 0;

}

js代码：/**

* 页面的初始数据

*/

data: {

showModal: false,

textV:''

},

/**

* 控制显示

*/

eject:function(){

this.setData({

showModal:true

})

},

/**

* 点击返回按钮隐藏

*/

back:function(){

this.setData({

showModal:false

})

},

/**

* 获取input输入值

*/

wish_put:function(e){

this.setData({

textV:e.detail.value

})

},

/**

* 点击确定按钮获取input值并且关闭弹窗

*/

ok:function(){

console.log(this.data.textV)

this.setData({

showModal:false

})

}

3.完整代码

最后献上完整代码，有点啰嗦了，想尽量详细点

wxml代码：

弹窗

标题

返回

确定

wxss代码：.body{

width: 100%;

height: 100%;

background-color: #fff;

position: fixed;

display: flex;

}

.body button{

height: 100rpx;

}

.model{

position: absolute;

width: 100%;

height: 100%;

background: #000;

z-index: 999;

opacity: 0.5;

top: 0;

left:0;

}

.modalDlg{

width: 70%;

position: fixed;

top:350rpx;

left: 0;

right: 0;

z-index: 9999;

margin: 0 auto;

background-color: #fff;

border-radius: 10rpx;

display: flex;

flex-direction: column;

align-items: center;

}

.windowRow{

display: flex;

flex-direction: row;

justify-content: space-between;

height: 110rpx;

width: 100%;

}

.back{

text-align: center;

color: #f7a6a2;

font-size: 30rpx;

margin: 30rpx;

}

.userTitle{

font-size: 30rpx;

color: #666;

margin: 30rpx;

}

.wishName{

width: 100%;

justify-content: center;

flex-direction: row;

display: flex;

margin-bottom: 30rpx;

}

.wish_put{

width: 80%;

border: 1px solid;

border-radius: 10rpx;

padding-left: 10rpx;

}

.wishbnt{

width: 100%;

font-size: 30rpx;

margin-bottom: 30rpx;

}

.wishbnt_bt{

width: 50%;

background-color: #f7a6a2;

color: #fbf1e8;

font-size: 30rpx;

border: 0;

}

js代码：Page({

/**

* 页面的初始数据

*/

data: {

showModal: false,

textV:''

},

/**

* 控制显示

*/

eject:function(){

this.setData({

showModal:true

})

},

/**

* 点击返回按钮隐藏

*/

back:function(){

this.setData({

showModal:false

})

},

/**

* 获取input输入值

*/

wish_put:function(e){

this.setData({

textV:e.detail.value

})

},

/**

* 点击确定按钮获取input值并且关闭弹窗

*/

ok:function(){

console.log(this.data.textV)

this.setData({

showModal:false

})

}

})

推荐教程：《微信小程序》