点击提现调起支付页面
<div class="Keyboard_man" style="display: none">
<div class="top_password">
<div class="add_button">
<div class="please_password">请输入支付密码</div>
<div class="cancel">取消</div>
</div>
<div class="pay_password">
<div class="password"><span class="active"></span></div>
<div class="password"><span class="active"></span></div>
<div class="password"><span class="active"></span></div>
<div class="password"><span class="active"></span></div>
<div class="password"><span class="active"></span></div>
<div class="password"><span class="active"></span></div>
</div>
</div>
<div class="layer-content">
<div class="form_edit clearfix">
<div class="num">1</div>
<div class="num">2</div>
<div class="num">3</div>
<div class="num">4</div>
<div class="num">5</div>
<div class="num">6</div>
<div class="num">7</div>
<div class="num">8</div>
<div class="num">9</div>
<div class="num">.</div>
<div class="num">0</div>
<div id="remove">删除</div>
</div>
</div>
</div>
/*键盘*/
.form_edit {
width: 100%;
background: #D1D4DD;
}
.form_edit > div {
margin-bottom: 2px;
margin-right: 0.5%;
float: left;
width: 33%;
height: 45px;
text-align: center;
color: #333;
line-height: 45px;
font-size: 18px;
font-weight: 600;
background-color: #fff;
border-radius: 5px;
}
.form_edit > div:nth-child(3n) {
margin-right: 0;
}
.form_edit > div:last-child {
background-color: #DEE1E9;
}
/*密码*/
.pay_password {
width: 90%;
margin: 20px auto;
display: flex;
height: 45px;
line-height: 47px;
justify-content: space-around;
border: 1px solid #888;
background-color: white;
border-radius: 3px;
}
.password {
width: 16.6%;
border: none;
text-align: center;
border-right: 1px solid #888888;
}
.password:last-child {
border: none;
}
.active {
width: 15px;
height: 15px;
display: inline-block;
background: black;
border-radius: 50%;
}
.top_password {
position: fixed;
width: 100%;
top: 0;
left: 0;
background-color: #f3f3f3;
bottom: 0;
}
.please_password {
text-align: center;
font-size: 17px;
background: white;
flex: 1;
}
.add_button {
display: flex;
align-items: center;
padding: 30px 15px;
background: white;
justify-content: space-between;
}
.layer-content {
bottom: 0;
position: fixed;
width: 100%;
left: 0;
}
.cancel {
color: green;
}
// 点击键盘输入密码
$(document).on("click", ".form_edit .num", function () {
var that = this.innerHTML;
var span = '<span class="active"></span>'
$(".password[data-index="+index+"]").attr("data-value",that);
$(".password[data-index="+index+"]").html(span);
index +=1;
if (index >=6){
index = 6;
}
if (index == 6){
//当密码输入到第六位的时候
// 遍历密码进行拼接
var arry = "";
console.log(arry);
$(".password").map(function (index,item) {
console.log($(item).attr("data-num"));
var new_string = $(item).attr("data-num").toString();
arry += new_string;
});
console.log(arry);
//当密码输入错误的时候清空
index = 0;
$(".password").html("");
}
});
// 删除密码
$(document).on("click", "#remove", function () {
index -=1;
$(".password[data-index="+index+"]").html("");
if (index <= 0){
index = 0;
}
});
点击的时候会绑定value值 把把获取到的value值进行传参就可以了