wxml文件：
<!--弹窗模块--> <view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view> <view class="modal-dialog" wx:if="{{showModal}}"> <view class="modal-title">修改姓名</view> <view class="modal-content"> <view class="modal-input"> <input placeholder-class="input-holder" type="text" maxlength="10" bindinput="inputChangename" class="input" value="{{stuName}}"></input> </view> </view> <view class="modal-footer"> <view class="btn-cancel" bindtap="onCancelname" data-status="cancel">取消</view> <view class="btn-confirm" bindtap="onConfirmname" data-status="confirm">确定</view> </view> </view> <!--视图层--> <view class='edit_name'> <view class='stu_name'>姓名</view> <text class='list' selectable='true'>{{stuName}}</text> <view class='edit' bindtap='nameup'>更新</view> </view>wxss文件：
/* 弹窗 */ .show-btn { margin-top: 100rpx; color: #22cc22; } .modal-mask { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #000; opacity: 0.5; overflow: hidden; z-index: 9000; color: #fff; } .modal-dialog { width: 540rpx; overflow: hidden; position: fixed; top: 50%; left: 0; z-index: 9999; background: #fff; margin: -180rpx 105rpx; border-radius: 36rpx; } .modal-title { padding-top: 50rpx; font-size: 36rpx; color: #030303; text-align: center; } .modal-content { padding: 50rpx 32rpx; } .modal-input { display: flex; background: #fff; border-bottom: 2rpx solid #ddd; border-radius: 4rpx; font-size: 28rpx; } .input { width: 100%; height: 82rpx; font-size: 28rpx; line-height: 28rpx; padding: 0 20rpx; box-sizing: border-box; color: #333; } input-holder { color: #666; font-size: 28rpx; } .modal-footer { display: flex; flex-direction: row; height: 86rpx; border-top: 1px solid #dedede; font-size: 34rpx; line-height: 86rpx; } .btn-cancel { width: 50%; color: #666; text-align: center; border-right: 1px solid #dedede; } .btn-confirm { width: 50%; color: #ec5300; text-align: center; }js文件：
//显示模块对话框 nameup: function() { this.setData({ showModal: true }) }, //隐藏模块对话框 hideModal: function() { this.setData({ showModal: false }); }, // 对话框取消按钮点击事件 onCancelname: function() { this.hideModal(); }, // 输入框内容改变事件 inputChangename: function(e) { this.setData({ stuName: e.detail.value }) }, // 对话框确认按钮点击事件 onConfirmname: function() { var that = this; wx.request({ url: 'https://www.111111.com/111.php', method: "post", header: { "Content-Type": "application/x-www-form-urlencoded" }, data: { type: "updata", //在服务器端已这个参数判断调动哪个函数或者IF语句 stuname: that.data.stuName, }, success(res) { console.log(res.data) if (res.data == '成功') { wx.showToast({ title: '修改成功', icon: 'success' }) that.hideModal(); } else if (res.data == '') { wx.showToast({ title: '服务器连接失败', icon: 'none' }) } }, }) },原文地址：https://www.ailaiyun.com/%e5%be%ae%e4%bf%a1%e5%b0%8f%e7%a8%8b%e5%ba%8f-%e5%bc%b9%e5%87%ba%e5%8f%af%e8%be%93%e5%85%a5%e6%95%b0%e6%8d%ae%e7%aa%97%e5%8f%a3.html
