使用小程序写一个弹窗输入组件

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

遮盖层的样式和显隐事件
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代码：

 /**
   * 页面的初始数据
   */
  data: {
    showModal: false,
  /**
   * 控制遮盖层的显示
   */
  eject:function(){
    this.setData({
      showModal:true
    })
  }

弹窗窗口的样式和显隐事件
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;
})

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

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

最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。