小程序之修改名字弹框

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

在这里插入图片描述

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 {

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
小程序中的wx.showToast是一个用于显示提示框的方法。它有三个参数可供使用:title、icon和duration。其中,title表示提示框的文字内容,icon表示图标样式,duration表示提示框的显示时长。 - 当参数icon为'success'时,提示框显示为成功的样式。 - 当参数icon为'loading'时,提示框显示为加载的样式。 示例代码如下: ``` wx.showToast({ title: '成功', icon: 'success', duration: 1000 }) ``` 除了wx.showToast方法,还有其他类似的方法可以使用,比如wx.showModal,它可以显示一个带有确定和取消按钮的模态对话框。可以通过修改默认文字颜色来定制对话框的样式。注意,文字颜色必须是16进制格式的颜色字符串,否则在iOS设备上按钮可能显示为空白。 示例代码如下: ``` wx.showModal({ title: '温馨提示!', content: '确定要删除该商品吗?', showCancel: true, cancelText: "不删除", cancelColor: '#000000', confirmText: "删除", confirmColor: '#576B95', success: function (res) { if (res.confirm) { // 点击确定执行的事件 } else if (res.cancel) { // 执行取消事件 } }, fail: function (res) { // 接口调用失败的回调函数 }, complete: function (res) { // 接口调用结束的回调函数(调用成功、失败都执行) }) ``` 通过使用这些方法,你可以在小程序中轻松地显示弹框,并根据需要进行样式的定制。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值