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

1.半透明的遮盖层

遮盖层的样式和显隐事件wxml代码：

<view class="body">  <button bindtap='eject'>弹窗</button></view><view class="model" catchtouchmove='preventTouchMove' wx:if='{{showModal}}'></view>

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代码：

<view class="modalDlg" catchtouchmove='preventTouchMove' wx:if='{{showModal}}'>  <view class='windowRow'>    <text class='userTitle'>标题  </text>    <view class='back' bindtap='back'>      返回    </view>  </view>  <view class='wishName'>    <input bindinput='wish_put' placeholder='请输入内容' class='wish_put'></input>  </view>  <view class='wishbnt'>    <button class='wishbnt_bt' bindtap='ok'>确定</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 class="body">  <button bindtap='eject'>弹窗</button></view><view class="model" catchtouchmove='preventTouchMove' wx:if='{{showModal}}'></view><view class="modalDlg" catchtouchmove='preventTouchMove' wx:if='{{showModal}}'>  <view class='windowRow'>    <text class='userTitle'>标题  </text>    <view class='back' bindtap='back'>      返回    </view>  </view>  <view class='wishName'>    <input bindinput='wish_put' placeholder='请输入内容' class='wish_put'></input>  </view>  <view class='wishbnt'>    <button class='wishbnt_bt' bindtap='ok'>确定</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    })  }})

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

以上就是使用小程序写一个弹窗输入组件的详细内容，更多请关注24课堂在线网其它相关文章！