小程序带输入框的弹窗

article/2025/9/21 8:53:05

老规矩,直接上代码

    <block wx:if="{{isShowConfirm}}"><view class='toast-box'><view class='toastbg'></view><view class='showToast'><view class='toast-title'><text>确认支付</text></view><view class='toast-main'><view class='toast-input'><input type='password' placeholder='输入支付密码' bindinput='setValue' data-name='stuEidtName'></input></view></view><view class='toast-button'><view class='button1'><button catchtap='cancel'>取消</button></view><view class='button2'><button data-url="../allOrder/allOrder" catchtap='confirmAcceptance'>确定</button></view></view></view></view></block>
.toast-box {width: 100%;height: 100%;opacity: 1;position: fixed;top: 0px;left: 0px;
}.toastbg {opacity: 0.2;background-color: black;position: absolute;width: 100%;min-height: 100vh;
}.showToast {position: absolute;opacity: 1;width: 70%;margin-left: 15%;margin-top: 40%;
}.toast-title {padding-left: 5%;background-color: #2196f3;color: white;padding-top: 2vh;padding-bottom: 2vh;border-top-right-radius: 16rpx;border-top-left-radius: 16rpx;
}.toast-main {padding-top: 2vh;padding-bottom: 2vh;background-color: white;text-align: center;
}.toast-input {margin-left: 5%;margin-right: 5%;border: 1px solid #ddd;padding-left: 2vh;padding-right: 2vh;padding-top: 1vh;padding-bottom: 1vh;
}.toast-button {display: flex;
}.button1 {width: 50%;
}.button2 {width: 50%;
}.button1 button {width: 100%;background-color: white;color: red;border-radius: 0px;border-bottom-left-radius: 16rpx;
}.button2 button{width: 100%;background-color: white;color: black;border-radius: 0px;border-bottom-right-radius: 16rpx;
}

顺便贴一下js好了,不关js事, 完全就是为了直接复制不会报错

  //dataisShowConfirm:false        setValue: function (e) {this.setData({walletPsd: e.detail.value})},cancel: function () {var that = thisthat.setData({isShowConfirm: false,})},confirmAcceptance:function(){var that = thisthat.setData({isShowConfirm: false,})},

 


http://chatgpt.dhexx.cn/article/uKyYmfwQ.shtml

相关文章

微信小程序 自定义弹框组件

话不多说直接上代码 目录 1、wxml 2、js 3、wxss 4、json 5、效果展示&#xff08;具体内容可以自定义&#xff09; 1、wxml <!--pages/components/confirmBox/confirmBox.wxml--> <wxs src"../../../filter/urlFilter.wxs" module"filter"…

微信小程序——点击某个按钮实现下面弹窗的出现

效果图:(真的是图) wxml(代码里面有解释&#xff09; <button type"primary" bindtap"Popup">点我</button> <!--点击后灰色背景的设置--> <view wx:if"{{now_state}}" class"background" bindtap"hideM…

微信小程序实现底部向上弹框

本文转自 作者&#xff1a;smallzip 链接&#xff1a;https://www.jianshu.com/p/bd9a4f4b8e6a 著作权归作者所有。商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处。 效果 小程序自定义底部弹出modal框组件&#xff0c;仿照小程序sheet-action的效果&#xff0…

uniapp微信小程序的各种弹框提示(轻提示)

您直接复制粘贴即可使用不需要做特殊的处理。 如您满意请给莫成尘点个Fabulous 1&#xff1a; 纯文字提示框 uni.showToast({title: 只有文字弹窗,icon: none, //如果要纯文本&#xff0c;不要icon&#xff0c;将值设为noneduration: 2000 //持续时间为 2秒 }) 2&…

小程序实现弹出输入框

1.微信自带组件 样式&#xff1a; wxml <view class"close" bindtap"close">拒绝</view>js Page({//拒绝close(e) {wx.showModal({editable:true,//显示输入框placeholderText:输入拒绝原因,//显示输入框提示信息success: res > {if (re…

微信小程序提示弹窗大全

wx.showToast(OBJECT) 显示消息提示框 OBJECT参数说明&#xff1a; 示例代码&#xff1a; ? 1 2 3 4 5 wx.showToast({ title: 成功 , icon: success , duration: 2000 }) wx.hideToast() 隐藏消息提示框 ? 1 2 3 4 5 6 7 8 9 wx.showToast({ title: 加载中 , icon: lo…

微信小程序 四种弹窗方式

微信小程序弹窗 一、wx.showToast(Object object)二 、wx.showModal(Object object)三、wx.showLoading(Object object)四、wx.showActionSheet(Object object)五、官方文档 一、wx.showToast(Object object) 显示消息提示框 wx.showToast({title: 内容, //提示的内容duration…

微信小程序弹出框详解

[html] view plain copy <span style"font-family:Comic Sans MS;font-size:18px;color:#333333;"><view class"container" class"zn-uploadimg"> <button type"primary"bindtap"showok">消息提示…

微信小程序几种常用弹窗提示

第一种&#xff1a;弹出提示框&#xff0c;可以选择确定或者取消。 代码&#xff1a;wx.showModal({title: 提示,content: 这是一个模态弹窗,success: function (res) {if (res.confirm) {//这里是点击了确定以后console.log(用户点击确定)} else {//这里是点击了取消以后conso…

微信小程序几种常用弹窗提示方法

1.提示文字 可以设置显示时间&#xff08;仅提示时使用&#xff09;duration设置时间 不显示icon&#xff0c;此时 title文字最多可显示两行 也可以显示icon&#xff0c;显示icon文字最多显示 7 个汉字长度 icon常用的有&#xff1a;success、error、loading wx.showToast(…

微信小程序展示弹窗的方式

微信小程序中展示弹窗有四种方式&#xff1a;wx.showToast、wx.showModal、wx.showLoading、wx.showActionSheet 具体参数可参照微信开发文档 1. wx.showToast <!-- index.wxml --> <!-- wx.showToast(消息提示框) --> <button bindtap"handleShowToast&…

微信小程序之弹出框

微信小程序中toast消息提示框只有两种显示的效果&#xff0c;就是成功和加载&#xff0c;使用wx.showToast(OBJECT)。 看下有关参数说明&#xff1a; 代码很简单&#xff1a; wx.showToast({title: 成功,icon: succes,duration: 1000,mask:true}) mask属性好像并没有起作用。有…

微信小程序弹窗

微信小程序自定义底部、顶部、中间、左边、右边弹窗 简单的微信小程序弹窗功能&#xff0c;具体实现过程&#xff0c;请浏览代码。 顶部弹出窗图例&#xff1a; 中间弹出窗图例&#xff1a; 底部弹出窗图例&#xff1a; 左边弹出窗图例&#xff1a; 右边弹出窗图例&#x…

微信小程序弹窗提示怎么写

第一种&#xff1a;弹出提示框&#xff0c;可以选择确定或者取消。 代码&#xff1a; wx.showModal({ title: 提示, content: 这是一个模态弹窗, success: function (res) { if (res.confirm) {//这里是点击了确定以后 console.log(用户点击…

微信小程序的弹窗提示

第一种&#xff1a;弹出提示框&#xff0c;用户可以选择确定或者取消&#xff0c;且都带有回调。 wx.showModal({title: 提示,content: 这是一个模态弹窗,success: function (res) {if (res.confirm) { //这里是点击了确定以后console.log(用户点击确定)} else { //这里是点击了…

CSS中水平居中、垂直居中和水平同时垂直居中

1.水平居中 2.垂直居中 3.水平并垂直居中 flex布局用到父元素上&#xff0c;绝对定位用到子元素上。

HTML/CSS:图片居中(水平居中和垂直居中)

css图片居中分css图片水平居中和垂直居中两种情况&#xff0c;有时候还需要图片同时水平垂直居中。 css图片水平居中 1.利用margin: 0 auto实现图片水平居中 利用margin: 0 auto实现图片居中就是在图片上加上css样式margin: 0 auto 如下&#xff1a; <div style"text-…

前端|如何让一个元素水平居中/垂直居中?

不知道你们是否有这样的体验&#xff0c;水平居中在前端中经常使用&#xff0c;但是&#xff01;&#xff01;&#xff01;每次一用就各种不起作用。各种justify-content,align-item,text-align,margin&#xff0c;经过种种尝试之后&#xff0c;终于能够居中了&#xff0c;但下…

微信小程序元素水平居中或垂直居中

.wxml<view class"father"> <view class"children1">子元素1</view> <view class"children2">子元素2</view> <view class"children3">子元素3</view> </view>.wxss.father{display:…

【CSS】元素居中总结-水平居中、垂直居中、水平垂直居中

【CSS】元素居中 一、 水平居中1.行内元素水平居中&#xff08;1&#xff09;text-align 2.块级元素水平居中2.1 margin&#xff08;1&#xff09;margin 2.2布局&#xff08;1&#xff09;flex justify-content&#xff08;推荐&#xff09;&#xff08;2&#xff09; flexmar…