简单的遮罩层加登录窗效果
<!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>
轉載于:https://www.cnblogs.com/hhhhhh/p/5823473.html
總結
以上是生活随笔為你收集整理的简单的遮罩层加登录窗效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C# 5.0新加特性
- 下一篇： redis aof持久化遇到的Can't