<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span{
display: inline-block;
padding: 4px 12px;
background: #E2E4E6;
cursor: pointer;
}
#register{
margin-left: 12px;
}
#mask{
width: 100%;
height: 2000px;
background: #000000;
opacity: 0.6;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
display: none;
}
#loginPage{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 1100;
display: none;
}
.loginMenu{
box-sizing: border-box;
height: 60px;
padding-left: 15px;
color: white;
font-size: 20px;
line-height: 60px;
background: red;
}
.loginCon{
box-sizing: border-box;
height: 300px;
width: 600px;
color: white;
text-align: center;
position: relative;
background: white;
overflow: hidden;
background: url(img/ba1c17be852740a74807a67531880caf.jpg) no-repeat;
background-size: 100% 100%;
}
.loginCon div:first-of-type{
margin-top: 100px;
}
.loginCon div:last-of-type{
margin-top: 12px;
}
.loginCon input{
height: 30px;
}
#close{
display: inline-block;
padding: 0;
background: transparent;
color: white;
font-size: 24px;
position: absolute;
right: 20px;
top: 15px;
z-index: 1200s;
}
</style>
</head>
<body>
<header>
<span id="login">登录</span>
<span id="register">注册</span>
</header>
<!--1. 演示遮罩层和弹出层-->
<div id="mask">
</div>
<div id="loginPage">
<div class="loginMenu">
登录
</div>
<div class="loginCon">
<div><label>用户名：</label><input type="text" name="username" id="username" value="" placeholder="请输入用户名"/></div>
<div><label>密 码：</label><input type="password" name="password" id="password" value="" placeholder="请输入密码"/></div>
</div>
<span id="close">X</span>
</div>
</body>
<script type="text/javascript">
//2. 使用js动态实现遮罩层和弹出层
var login = document.getElementById('login');
var register = document.getElementById('register');
var mask = document.getElementById('mask');
var loginPage = document.getElementById('loginPage');
var close = document.getElementById('close');
//点击登录创建遮罩层和登录框
login.addEventListener('click',uLogin);
//创建登录框
function uLogin(){
loginPage.style.display = "block";
mask.style.display = "block";
//点击关闭按钮关闭遮罩层和登录框
var btnClose = document.getElementById('close');
btnClose.addEventListener('click',closeLogin);
//点击除登录框外的地方也可以关闭遮罩层和登陆框
mask.addEventListener('click',closeLogin);
function closeLogin(){
loginPage.style.display = "none";
mask.style.display = "none";
}
}
</script>
</html>
