仿微信支付密码的弹框
问题: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;
}
效果:
输入密码之后的效果:
|
|
|
就是这样了。