弹框样式--代码

来源：互联网发布：mac照片u盘导入win7 编辑：程序博客网时间：2024/06/06 12:21

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,user-scalable=no" />
<meta charset="UTF-8">
<script type="text/javascript">
(function() {
setSize();
window.onresize = setSize;
function setSize() {
var html = document.documentElement;
var htmlW = html.clientWidth;
html.style.fontSize = htmlW / 7.5 + "px";
}
})(); //
</script>
<title>Document</title>
<style type="text/css">
#captchaMask {
/*display: none;*/
overflow: hidden;
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: 400;
background: rgba(0, 0, 0, 0.4);
}
a{
text-decoration: none;
}
#verification {
position: absolute;
width: 5.76rem;
height: 4.44rem;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background: #fff;
border-radius: 0.125rem;
}

.captchheader {
position: relative;
height: .97rem;
margin-left: .2rem;
margin-right: .16rem;
border-bottom: 1px solid #f1f1f2;
text-align: center;
color: #888;
font-size: 0.28rem;
line-height: .97rem;
}

#closeBtn img{
position: absolute;
right: 0.32rem;
top: 0.35rem;
height: 0.26rem;
width: 0.26rem;
color: #757575;
}
.content {
height: 1.88rem;
}

.inputting {
display: inline-block;
width: 3rem;
/*margin-left: .33rem;*/
vertical-align: top;
}

.inputting input {
border: none;
border-bottom: 1px solid #f1f1f2;
padding-left: .2rem;
margin-left: 0.2rem;
width: 3rem;
font-size: .26rem;
line-height: .74rem;
margin-top: .51rem;
}

.img {
display: inline-block;
width: 1.8rem;
margin-left: 0.3rem;
}

.img>img {
/*margin-top: .9rem;*/
display: inline-block;
margin-left: .21rem;
width: 1.6rem;
height: .6rem;
}

.img>a {
display: block;
font-size: 0.2rem;
color: #499df2;
width:3rem ;
margin-top: 0.07rem;
margin-left: .1rem;
}

.captchaBtn {
margin-top: .4rem;
margin-left: .26rem;
width: 5.32rem;
height: .8rem;
background: #499df2;
border-radius: 0.125rem;
text-align: center;
font-size: 0.24rem;
line-height: .8rem;
}

.captchaBtn>a {
color: #fff;
}

</style>
</head>
<body>

<div class="container">
<div class="logoBlue">
<img src="../../static/img/common_icon.png">

</div>
<div class="first-pay padding-inherit">
<ul class="padding-inherit">
<li>
<div class="boder-bottom">
<b>手机号码</b>
<input type="number" name="phone" value="">
</div>
</li>
<li>
<div>
<b>短信验证码</b>
<input type="number" name="code" value="">
<i class="font-22 line"><button id="send" class="font-color-blue">发送验证码</button></i>
</div>
</li>
</ul>

<p class="distance"><input class="select" name="select" type="checkbox" checked="cheked">我同意<a href="/pay_agreement">《线上支付协议》</a></p>

</div>

<a id="weui_btn1" href="javascript:;" ><button id="weui_btn" class="weui_btn weui-col-100 bg-blue">立即绑定</button></a>
</div>

<div id="captchaMask">
<div id="verification">
<div class="captchheader">图文验证
<a id="closeBtn" class="iconfont"><img src="img/icon.png"></a>
</div>
<div class="content clearFix">
<div class="inputting fl">
<input type="text" id="captchaInput" placeholder="请输入验证码">
</div>
<div class="img fr">
<img id='captchaImg' src="">
<a id="changeImg" href="javascript:;">看不清楚，换一张</a>
</div>
</div>
<div class="captchaBtn">
<a href="javascript:;">确定</a>
</div>
</div>
</div>
<script type="text/javascript">
var message = {
"count": '', // 已发送次数
"captcha_img": "", // 验证码图片地址
"token": "" // 本次token
}
//关闭按钮x
$('#closeBtn').bind('click',function () {
$('#captchaMask').css('display','none')
});

// var timeNum = 30;
$("#send").bind('click', sendCode);
// timer();
function sendCode() {
var phone = $("input[name='phone']").val();
if (!(/^1[3,5,8,4,7]\d{9}$/).test(phone)) {
alert("手机号格式不正确");
return false;
}
$("#send").unbind("click");
// timer();
$.ajax({
type: "GET",
url: "/api/v2/account/check_phone_code",
data: {
"phone": phone
},
success: function (res) {
message = res.data;
$('#captchaImg').attr('src','message.captcha_img');
$('#captchaMask').css('display','block');

},
error: function (data) {

if (!data.status) {
alert(data.msg);
}
}
})
}
$("#changeImg").click(function(){
changeImg();
});
function changeImg() {
// $("#changeImg").bind("click");
$.ajax({
type: "GET",
url: "/api/v2/account/refresh_captcha",
data: {
"phone": phone,
'token':message.token
},
success: function (res) {
message.captcha_img = res.data.captcha_img;
$('#captchaImg').attr("src" ,'message.captcha_img');
},
error: function (data) {

if (!data.status) {
alert(data.msg);
}
}
})
}

var timeNum = 30
$('.captchaBtn').bind('click',setmessage);
timer();//点击确定后开始倒计时
function setmessage() {
if ($("#captchaInput").val() == "" ) {
alert("验证码");
return false;
}//
$.ajax({
type: "GET",
url: "/api/v2/account/send_verify_code",
data: {
"phone": phone,
'token':message.token,
'count':message.count,
'captcha':$("#captchaInput").val()
},

success: function (res) {

$('#captchaMask').css('display','none');
},
error: function (data) {
if (!data.status) {
alert(data.msg );
}
}
})
}

//倒计时
function timer() {
if (t1) {
clearTimeout(t1)
}
if (timeNum == 1) {
timeNum = 30;
$("#send").text("重新发送");
$("#send").bind("click", sendCode);
return;
} else {
timeNum = timeNum - 1;
$("#send").text(timeNum + "s后重发");
}

var t1 = setTimeout(timer, 1000);
}

//
// $(".select").click(function(){
// if(!$(".select").is(":checked")){
// $("#weui_btn").css({"background":"white","color":"#000000"});
// $("#weui_btn").attr("disabled",true)
// }else{
// $("#weui_btn").css({"background":"#499df2","color":"white"});
// $("#weui_btn").attr("disabled",false)
// }
// })

// $("#weui_btn").click(function () {
// var phone = $("input[name='phone']").val();
// var code = $("input[name='code']").val();
//
// if (!(/^1[3,5,8,4,7]\d{9}$/).test(phone)) {
// alert("手机号格式不正确");
// return;
// } else if (code == "") {
// alert("验证码不能为空");
// return;
// }
// var data = {
// phone: phone,
// check_code: code
// }
// $.showLoading();
// $.ajax({
// type: "POST",
// url: "/bindphone/?current_token={{current_token}}",
// data: data,
// success: function (data) {
// $.hideLoading();
// window.location.href = "/bills/?current_token={{current_token}}"
// },
// error: function (data) {
// $.hideLoading();
// if (data.status != 200) {
// alert(data.responseJSON.error);
// }
// }
// })
// })

</script>
</body>

</html>

Js部分为修改版不是最终版本。。。

阅读全文

0 0