<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#login-register span{
display: inline-block;
padding: 6px 10px;
background: #E3E3E3;
cursor: pointer;
}
#mask{
height: 2000px;
100%;
background: #666;
position: fixed;
top: 0;
left: 0;
opacity: 0.6;
z-index: 100;
display: none;
}
#loginPage{
430px;
height: 295px;
background: url(img/TencentLogin.png) no-repeat;
position: fixed;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
z-index: 1000;
display: none;
}
#close{
float: right;
height: 30px;
30px;
margin: 10px 10px 0 0;
background: url(img/close.png) no-repeat;
cursor: pointer;
}
</style>
</head>
<body>
<div id="login-register">
<span id="login">登录</span>
<span id="register">注册</span>
</div>
<!--遮罩层-->
<div id="mask">
</div>
<!--登录页面-->
<div id="loginPage">
<span id="close"></span>
</div>
</body>
<script type="text/javascript">
var login = getId("login");
// var register = getId(register);
var mask = getId('mask');
var loginPage = getId('loginPage');
var close = getId('close');
// console.log(login)
//登录按钮的点击事件
login.addEventListener('click',showLogin);
function showLogin(){
mask.style.display = "block"
loginPage.style.display = "block"
}
//X的事件
close.addEventListener('click',closeLogin);
function closeLogin(){
mask.style.display = "none"
loginPage.style.display = "none"
}
//点击遮罩层关闭登陆框
mask.addEventListener('click',closeLogin);
//通过函数封装通过id获取元素
function getId(id){
return document.getElementById(id);
}
</script>
</html>