这次给大家分享的是目前很多网站中流行的弹出式登录框，如下面的腾讯网登录界面，采用弹出式登录的好处是大大提升了网站的用户体验和交互性，用户不用重新跳转到指定的页面就能登录，非常方便
先来个演示地址
要实现这个功能的大致思路是：
1.首先要在页面上设置一个登录按钮，可以是<button><a><img>都行，我们点击这个元素的时候会弹出登录框
2.其次在页面合适位置制作两个<div>，一个登录功能的div,另一个注册功能的div，注意位置的设置，当网站首次加载进入的时候登录框不可见，那就要把样式设置为display:"none"
3.当用户点击登录按钮的时候，通过JS设置登录div的display=""，如何用户点击了登录界面上的注册按钮时，通过jQuery切换div透明和大小就可以完美实现登录注册的切换
4.关闭登录框的话也是同样的道理，把两个div的display设置为none就行
上代码:
sign.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sign</title>
<style>
body {
text-align: center;
background-color: burlywood;
}
.signform {
font-family: 微软雅黑;
position: fixed;
background-color: white;
top: 20%;
left: 30%;
width: 500px;
height: 400px;
border-radius: 1em;
text-align: center;
z-index: 999;
}
#registerform {
height: 450px;
}
.signclose {
cursor: pointer;
float: right;
overflow: hidden;
text-align: center;
position: relative;
height: 35px;
width: 35px;
margin-top: 10px;
margin-right: 10px;
}
#registerloading{
position: absolute;
width: 25px;
height: 25px;
left: 410px;
top: 90px;
}
.signinput {
text-align: center;
border-radius: 0.2em;
width: 280px;
height: 45px;
border: none;
background-color:#f2f2f2;
font-size: 28px;
}
.signinput::-webkit-input-placeholder {
font-size: 26px;
}
.userdiv {
position: relative;
margin-top: 80px;
}
.pwddiv {
position: relative;
margin-top: 20px;
}
.postdiv {
position: relative;
margin-top: 20px;
}
.postdiv button {
cursor: pointer;
color: white;
font-size: 26px;
border: none;
border-radius: 0.4em;
width: 280px;
height: 45px;
background-color:#4CAF50;
}
</style>
<link rel="stylesheet" href="css/sign.css">
</head>
<body>
<div>
<button id="displaysign" onclick="start()">点击登录</button>
</div>
<div class="signform" id="signform" style="display: none">
<div class="signclose">
<img src="data:image/signclose.ico" width="35px" height="35px" onclick="signclose()">
</div>
<div class="userdiv">
<input id="user" class="signinput" type="text" placeholder="用户名" name="user" >
</div>
<div class="pwddiv">
<input id="pwd" class="signinput" type="password" placeholder="密码" name="pwd">
</div>
<div class="postdiv">
<button>登录</button>
</div>
<br>
<div class="change" style="color: #4d4d4d">
<p>还没有账号?赶快<a href="#" style="text-decoration: none;color: #43A047">注册</a>一个吧</p>
</div>
</div>
<div class="signform" id="registerform" style="display: none">
<div class="signclose">
<img src="data:image/signclose.ico" width="35px" height="35px" onclick="signclose()">
</div>
<div class="userdiv">
<input id="registeruser" class="signinput" onblur="loading()" type="text" placeholder="用户名" name="user">
</div>
<img src="data:image/signloading.gif" style="display: none" id="registerloading">
<div class="pwddiv">
<input id="registerpwd" class="signinput" type="password" placeholder="密码" name="pwd">
</div>
<div class="pwddiv">
<input id="registerrepwd" class="signinput" type="password" placeholder="再次输入密码" name="pwd">
</div>
<div class="postdiv">
<button>注册</button>
</div>
<br>
<div class="change" style="color: #4d4d4d">
<p>已有账号?立刻去<a href="#" style="text-decoration: none;color: #43A047">登录</a>吧</p>
</div>
</div>
</body>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/signformchange.js"></script>
</html>
sign.css
body {
text-align: center;
background-color: burlywood;
}
#displaysign{
position: relative;
top: 80px;
width: 70px;
height: 40px;
}
.signform {
font-family: 微软雅黑;
position: fixed;
background-color: white;
top: 20%;
left: 30%;
width: 500px;
height: 400px;
border-radius: 1em;
text-align: center;
z-index:;
}
#registerform {
height: 450px;
}
.signclose {
cursor: pointer;
float: right;
overflow: hidden;
text-align: center;
position: relative;
height: 35px;
width: 35px;
margin-top: 10px;
margin-right: 10px;
}
#registerloading{
position: absolute;
width: 25px;
height: 25px;
left: 410px;
top: 90px;
}
.signinput {
text-align: center;
border-radius: 0.2em;
width: 280px;
height: 45px;
border: none;
background-color:#f2f2f2;
font-size: 28px;
}
.signinput::-webkit-input-placeholder {
font-size: 26px;
}
.userdiv {
position: relative;
margin-top: 80px;
}
.pwddiv {
position: relative;
margin-top: 20px;
}
.postdiv {
position: relative;
margin-top: 20px;
}
.postdiv button {
cursor: pointer;
color: white;
font-size: 26px;
border: none;
border-radius: 0.4em;
width: 280px;
height: 45px;
background-color:#4CAF50;
}
signformchange.js
$(function ()
{
$('.change a').click(function ()
{
$('.signform').animate({height: 'toggle', opacity: 'toggle'}, 'slow');
});
}) function start() {
document.getElementById('signform').style.display=""
} function signclose() {
document.getElementById('signform').style.display="none"
document.getElementById('registerform').style.display="none"
}
function loading() {
document.getElementById('registerloading').style.display=""
}
