仿微信支付密码的弹框

问题：pc端，在用户选择完支付方式之后，点击 -‘ 确认支付 ’ 时，需要输入密码，此时需要一个输入密码的弹出框。

下面就来写一下，静态页面（比较粗略：）：

看一下-----html代码：

<!-- 支付密码-弹框 start -->
<div class="goPayTanKuang" style='display:none;'><div class="payChoose_tk"><div class="payChoose_in"><div class="payChooseTotal clearAfter"><div class="orderNum">订单编号：DD154563267899675</div></div><div class="line"></div><div class="payStyle" style='font-size:34px;'>￥880</div><ul class="clearAfter"><li><input type="password" name="" maxlength="6" oninput="goPayTkInput()"></li></ul><a class="goPay" href="javascript:;">确定</a><div class="close" onclick="$('.goPayTanKuang').hide()"><img src="img/payChooseGbi.png" alt=""></div></div></div>
</div>
<!-- 支付密码-弹框 start -->

css样式：

是在之前的弹框基础上改的，这里就不简化了:）

/****** 支付选择-弹框 start ******/
.payChoose_tk{display: none;position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,0.3);
}
.payChoose_tk .payChoose_in{width: 643px;height: 469px;border-radius: 30px;background: #ffffff;box-shadow:1px 3px 40px 10px rgba(0,0,0,0.3);margin:0 auto;margin-top: 15%;
}
.payChooseTotal .orderNum{float: left;width: 80%;font-size: 20px;font-weight: 400;padding:60px 0 20px 52px;
}
.payChooseTotal .orderPrice{float: left;width: 20%;font-size: 28px;color: #FF6600;text-align: right;padding:56px 58px 20px 0;
}
.payChoose_in{position: relative;
}
.payChoose_in .line{height: 1px;background: #DBD6D6;margin:0 32px;
}
.payChoose_in .payStyle{font-size: 14px;color: #666666;text-align: center;padding: 38px 0 45px 0;
}
.payChoose_in .payStyle a{font-size: 14px;color: #2DBE60;
}
.payChoose_in ul{padding: 0 50px 0 50px;
}
.payChoose_in ul li{float: left;width: 33.33%;text-align: center;cursor: pointer;
}
.payChoose_in ul li .checks{padding: 20px 0 0 0;background: url(../img/payChooseGrey.png)no-repeat  31% 89%;
}
.payChoose_in ul li .checks.checked{background: url(../img/payChooseBlue.png)no-repeat  31% 89%;
}
.payChoose_in ul li .checks span{font-size: 12px;color: #333333;padding-left:2px;
}
.payChoose_in ul li .checks input[type=radio]{width: 16px;height: 16px;vertical-align: middle;opacity: 0;
}
.payChoose_in a.goPay{display: block;width: 203px;height: 40px;font-size: 16px;color: #FFFFFF;background: #2DBE60;border-radius: 20px;text-align: center;line-height: 40px;margin:0 auto;margin-top: 40px;
}
.payChoose_in a.goPay:hover{opacity: .7;-webkit-transition: all .4s ;-moz-transition: all .4s ;-ms-transition: all .4s ;-o-transition: all .4s ;transition: all .4s ;
}
.payChoose_in .close{width: 20px;height: 20px;text-align: center;cursor: pointer;position: absolute;right: 25px;top: 25px;
}/****** 支付选择-弹框 end ******/
.goPayTanKuang .payChoose_in .payStyle{padding: 45px 0 40px 0;
}
.goPayTanKuang .payChoose_in ul{width: 89%;margin: 10px auto;height: 50px;overflow: hidden;border: 1px solid #bebebe;padding: 0;
}
.goPayTanKuang .payChoose_in ul li{border-right: 1px solid #efefef;height: 50px;float: left;width: 100%;text-align: center;background: #FFF;position: relative;
}
.goPayTanKuang .payChoose_in ul li input[type='password']{border:0;outline: none;display: inline-block;width: 400px;height: 98%;font-size: 30px;line-height: 50px;letter-spacing: 40px;
}
.goPayTanKuang .payChoose_in a.goPay{background: rgba(0,0,0,0.3);
}
.goPayTanKuang .payChoose_in ul li::before {display: inline-block;content: '请输入密码：';height: 50px;z-index: 999;position: absolute;top: 16px;left: 16px;
}

效果：

输入密码之后的效果：

｜

就是这样了。

仿微信支付密码的弹框相关推荐

php支付密码控件,Android高仿微信支付密码输入控件实例代码
这篇文章主要为大家详细介绍了Android高仿微信支付密码输入控件的具体实现代码,供大家参考,具体内容如下像微信支付密码控件,在app中是一个多么司空见惯的功能.最近,项目需要这个功能,于是乎就实现 ...
android仿支付提现功能,Android应用开发Android 仿微信支付密码界面
本文将带你了解Android应用开发Android 仿微信支付密码界面,希望本文对大家学Android有所帮助. 使用 Bundle bundle = new Bundle(); bundle.put ...
android支付宝支付微信支付封装,Android仿支付宝微信支付密码界面弹窗封装dialog...
一,功能效果二,实现过程 1,先写xml文件:dialog_keyboard.xml 注意事项 (1),密码部分用的是一个线性布局中6个TextView,并设置android:inputType=& ...
h5仿微信支付键盘|仿支付宝数字键盘
h5+js 高仿微信支付键盘|微信数字密码键盘|支付宝商铺付款键盘利用html5开发的仿微信支付数字键盘,密码软键盘插件wcKeyboard,可自定义背景.类型.皮肤,包含微信.支付宝两种皮肤样式, ...
android微信点赞ui,Android中使用PopupWindow 仿微信点赞和评论弹出
微信朋友圈的点赞和评论功能,有2个组成部分:左下角的"更多"按钮:点击该按钮后弹出的对话框: PopupWindow,弹出框使用PopupWindow实现,这是点赞和评论的载体,具 ...
web仿微信支付界面，自定义模拟键盘
web仿微信支付界面,自定义模拟键盘可谓是煞费苦心还是自己技能不足,不过还是出来了这里先声明:下面不是全部代码,想要全部代码的可以到个人主页下载先看下效果图第一板块是html界面有需要完整 ...
忘了微信密码怎么办_微信支付密码怎么改？微信支付密码忘了怎么办？详细教程来了！...
"一部手机走天下"至少在中国,已完全成为现实.无论是出门旅行,或是商场购物,还是日常生活,手机端APP支付已经成为了我们的基本支付工具."扫一扫"支付,已经完全 ...
html5+css3界面设计，仿微信支付设计数字键盘
html5+css3界面设计,仿微信支付设计数字键盘可以增加数字,删除数字,可以提交效果图如下: 部分代码: <!DOCTYPE html> <html> <head ...
新版仿微信支付生活缴费小程序源码+UniAPP内核
正文: 这是仿微信支付生活缴费微信小程序首页页面,使用 uni-app和Tailwind CSS框架制作,适配了深色模式. 程序: wwlef.lanzouq.com/iWdxI0bkl2hc 图片:

仿微信支付密码的弹框

仿微信支付密码的弹框相关推荐

最新文章

热门文章