智言个人博客直接上代码吧
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>遮罩层登录框Demo</title>
<style media="screen">
body{font-family: 'Microsoft Yahei'; background-color: #eaf0f2;}
body,ul{margin: 0; padding: 0;}
ul{list-style: none;}
a{text-decoration: none;}
.g_content{background-color: #fff; width: 100%; height: 80px; box-shadow:0 2px 6px #ddd;}
nav{width: 1200px; display: block; margin: 0 auto; height: 80px; }
nav ul li{float: left; padding: 0 20px; height: 80px;}
nav ul li a{line-height: 80px; color: #f66}
.nav-right{float: right; font-size: 12px; line-height: 80px;}
.nav-right a{color: #f66;}
#mask{position: fixed; z-index: 98; left: 0; top: 0; background-color: rgba(0,0,0,0.3); width: 100%; height: 100%; display: none;}
#login{border: 5px solid rgba(0,0,0,0.6); border-radius: 3px; width: 500px; height: 300px;background-color: #fff; position: fixed; z-index: 99; animation: zhiyan 0.1s; display: none;}
@keyframes zhiyan {
0%{border: 50px solid rgba(0,0,0,0.5) }
100%{border: 5px solid rgba(0,0,0,0.5)}
}
form{text-align: center; margin-top: 60px;}
input{width: 180px; height: 30px; margin: 10px 0; border: 2px solid #ddd; padding: 0 10px;}
input[type=submit]{border: 2px solid #f66; background-color: #f66; color: #fff; width: 200px; cursor: pointer;}
</style>
</head>
<body>
<div class="g_content">
<nav class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">前端</a></li>
<li><a href="#">后台</a></li>
<li><a href="https://www.asni.cn/" title="智言个人博客">个人博客</a></li>
</ul>
<div class="nav-right">
<a href="javascript:;" id="buts">我要登录</a>
</div>
</nav>
</div>
<div id="mask"></div>
<div id="login">
<form class="form" action="index.html" method="post">
<input type="text" name="user" placeholder="用户名"><br>
<input type="password" name="psw" placeholder="密码"><br>
<input type="submit" name="" value="登录一下">
</form>
</div>
<script type="text/javascript">
let buts = document.getElementById('buts');
let g_content = document.getElementById('g_content');
let mask = document.getElementById('mask');
let login = document.getElementById('login');
let sWidth = document.documentElement.clientWidth;
let sHeight = document.documentElement.clientHeight;
let oWidth;
let oHeight;
let flag = true;
window.onresize = function() {
sWidth = document.documentElement.clientWidth;
sHeight = document.documentElement.clientHeight;
oWidth = (sWidth - login.clientWidth - 10)/2;
oHeight = (sHeight - login.clientHeight - 10)/2;
if (!flag) {
setMaskStyle();
setLoginStyle();
}
}
function setMaskStyle() {
mask.style.display = 'inline-block';
mask.style.height = sHeight + 'px';
}
function setLoginStyle() {
oWidth = (sWidth - login.clientWidth - 10)/2;
oHeight = (sHeight - login.clientHeight - 10)/2;
login.style.left = oWidth + 'px';
login.style.top = oHeight + 'px';
}
buts.addEventListener('click', function(e) {
if (flag) {
setMaskStyle();
login.style.display = 'inline-block';
setLoginStyle();
flag = false;
}
});
mask.addEventListener('click', function(e) {
mask.style.display = 'none';
flag = true;
login.style.display = 'none';
});
</script>
</body>
</html>
代码没有做优化，直接根据思想步骤来写的，所以大家可以自行优化。这个DEMO采用自适应，可以直接使用。
这个好，正需要，帮我解决了问题，感谢！