小程序之修改名字弹框

最新推荐文章于 2024-07-30 09:41:01 发布

原创

最新推荐文章于 2024-07-30 09:41:01 发布 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#弹框

这篇博客展示了如何在小程序中创建一个修改名字的弹框。通过CSS代码定义了弹框的样式，包括颜色、位置、边框等细节。接着，JS代码部分揭示了页面数据和弹框的逻辑控制，如显示、隐藏、取消和确认操作，以及成功的反馈提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

css代码
.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;
top: 50%;
left: 0;
z-index: 9999;
background: #fff;
margin: -180rpx 105rpx;
border-radius: 36rpx;
position: relative;
}
.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 {