【微信小程序】自定义弹窗蒙版输入框效果图&完整代码

【微信小程序】自定义弹窗文本输入框效果图&完整代码

效果图

1. 在输入框中进行内容的输入
2. 点击确认后在姓名一栏进行更新修改
3. 点击返回后姓名一栏不做任何修改
4. 在这个的基础上你可以自定义任何弹窗

wxml

<view class="row xian"  bindtap='eject'>
  <view class="zuo">姓名</view>
  <view class="you">
    <view class="zhushi">{{volunteer.name}}</view>
    <image src="../../images/icon/jiantou.png" class="jiantou"></image>
  </view>
</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 style="width:100%" class='wishName'>
    <input style="width:100%" bindinput='wish_put' placeholder='请输入姓名' placeholder-class="holder_cls" class='wish_put'></input>
  </view>
  <view style="width:94%" class='wishbnt' bindtap='name'>确定</view>
</view>

js

Page({
/**
  * 页面的初始数据
  */
data: {
  showModal: false,
  name:'张三'
},
 /**
  * 控制显示
  */
eject:function(){
  this.setData({
    showModal:true
  })
},
/**
* 点击返回按钮隐藏
*/
back:function(){
  this.setData({
    showModal:false
  })
},
/**
* 获取input输入值
*/
wish_put:function(e){
  this.setData({
    textV:e.detail.value
  })
},
/**
* 点击确定按钮获取input值并且关闭弹窗
*/
name:function(){
  console.log(this.data.textV)
  this.setData({
    showModal:false,
    name:this.data.textV
  })
}
})

wxss

这里提供我这个弹窗的样式，当然你也可以自己进行更改定义

/* 弹窗样式 */
.model{
  position: absolute;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 999;
  opacity: 0.5;
  top: 0;
  left:0;
}
.modalDlg{
  width: 80%;
  position: fixed;
  top:300rpx;
  left: 0;
  right: 0;
  z-index: 9999;
  margin: 0 auto;
  padding: 55rpx;
  background-color: #fff;
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.windowRow{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 15rpx;
  width: 100%;
}
.userTitle{
  font-size: 42rpx;
}
.back{
  text-align: center;
  color: #f0a500;
  font-size: 30rpx;
}
.wishName{
  width: 100%;
  justify-content: center;
  flex-direction: row;
  display: flex;
  margin: 40rpx 0rpx;
}
.wish_put{
  width: 100%;
  border: #ededef 1rpx solid;
  background-color: #f6f7fb;
  border-radius: 12rpx;
  padding: 30rpx 20rpx;
  margin: 20rpx 0rpx;
}
.holder_cls{
  color: #909399;
}
.wishbnt{
  background-color: #fec600;
  text-align: center;
  border-radius: 50rpx;
  padding: 25rpx;
  color: white;
}
/*弹窗样式结束*/

/* 下面的姓名样式，不要也没什么影响 */
.jiantou{
  width: 35rpx;
  height: 35rpx;
  margin-left: 10rpx;
}
.fenge{
  margin-bottom: 30rpx;
}
.xian{
  border-bottom: #e5e5e5 1rpx solid;
}
.yellow{
  color: #f0a500;
  font-weight: 700;
}
.box{
  background-color: white;
  padding: 0rpx 25rpx;
  display: flex;
  flex-direction: column;
}
.row{
  height: 120rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.you{
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.zhushi{
  font-size: 28rpx;
  color: #808080;
}
/* 下面的姓名样式结束 */