写项目的时候发现小程序没有自带的弹窗输入的组件，只能自己写一个。
1.半透明的遮盖层
遮盖层的样式和显隐事件
wxml代码：
<view> <button>弹窗</button> </view><view></view>
wxss代码：
.model{
position: absolute;
width: 100%;
height: 100%;
background: #000;
z-index: 999;
opacity: 0.5;
top: 0;
left:0;
}
js代码：
小程序管理平台系统源码
下载
小程序管理平台系统源码是一套面向小程序服务商的一站式管理程序，基于 uniapp + ThinkPHP（PHP）开发，支持微信小程序、微信公众号与 H5 端。系统主打"全开源、独立部署、无限开 SAAS 账号"，适合需要集中管理多个小程序、为客户代开通与授权的小程序服务商使用。
/**
* 页面的初始数据
*/
data: {
showModal: false,
},
/**
* 控制遮盖层的显示
*/
eject:function(){
this.setData({
showModal:true
})
}
2.弹窗窗口实现
弹窗窗口的样式和显隐事件
wxml代码：
<view> <view> <text>标题 </text> <view> 返回 </view> </view> <view> <input> </view> <view> <button>确定</button> </view></view>
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代码：
<view> <button>弹窗</button> </view><view></view><view> <view> <text>标题 </text> <view> 返回 </view> </view> <view> <input> </view> <view> <button>确定</button> </view></view>
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
})
}
})
推荐教程：《微信小程序》
