<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>遮罩层加登录窗</title>
<style type="text/css">
#wrap{width: 60px;height: 30px;
position: absolute;
text-align: center;
line-height: 30px;
right: 100px;top: 50px;
cursor: pointer;}
#mask{
position: fixed;
width: 100%;
height: 100%;
background: #000;
left: 0;top: 0;
opacity: 0.3;
display: none;}
#login{width: 400px;height: 300px;
border: 2px solid #333;
position: fixed;
left: calc(50% - 200px);
top: calc(50% - 150px);
background: #fff;
display: none;}
#login div{display: inline-block;float: right;}
#left{width: 40px;height: 40px;
text-align: center;
line-height: 40px;
font-size: 30px;
cursor: pointer;}
#right{width: 360px;height: 40px;
line-height: 40px;
text-indent: 2em;}
</style>
</head>
<body>
<img src="img/1.jpg">
<div id="wrap">
登录
</div>
<div id="mask"></div>
<div id="login">
<div id="left">×</div>
<div id="right">登录窗</div>
</div>
<script type="text/javascript">
var wrap = document.getElementById('wrap');
var mask = document.getElementById('mask');
var login = document.getElementById('login');
var left = document.getElementById('left');
wrap.onclick = function(){
mask.style.display = 'block';
login.style.display = 'block';
}
left.onclick = function(){
mask.style.display = 'none';
login.style.display = 'none';
}
</script>
</body>
</html>