点击后弹出界面，通过判断浏览器长宽自动设定页面宽度和登陆页面位置。
<style>
/*遮罩层 弹出层*/
.mask {
100%;
background-color: rgba(0, 0, 0, 0.8);
position: fixed;
top: 0px;
left: 0px;
z-index: 200;
}
.show_d {
300px;
height: 300px;
background-color: gainsboro;
position: fixed;
z-index: 300;
}
</style>
<body>
<!--遮罩层-->
<div class="mask" hidden="hidden"></div>
<!--登陆弹出层-->
<div class="show_d" hidden="hidden">
</div>
</body>
</html>
<script>
//弹出层大小设定
var mask = document.getElementsByClassName("mask")[0];
var show_d = document.getElementsByClassName("show_d")[0];
var top_d = document.getElementsByClassName("top_d")[0];
var show_d_r = document.getElementsByClassName("show_d_r")[0];
var c_height = document.documentElement.clientHeight;
var c_width = document.documentElement.clientWidth;
mask.style.height = c_height + "px";
show_d.style.top = c_height / 2 - 150 + "px";
show_d.style.left = c_width / 2 - 150 + "px";
//登陆弹出设定
top_d.onclick = function() {
mask.removeAttribute("hidden");
show_d.removeAttribute("hidden");
}
mask.onclick = function() {
mask.setAttribute("hidden", "hidden");
show_d.setAttribute("hidden", "hidden");
}
show_d_r.onclick = function() {
mask.setAttribute("hidden", "hidden");
show_d.setAttribute("hidden", "hidden");
}
</script>