js弹出层代码
Posted 迪恩杰
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js弹出层代码相关的知识，希望对你有一定的参考价值。
点击后弹出界面，通过判断浏览器长宽自动设定页面宽度和登陆页面位置。
<style>
/*遮罩层 弹出层*/
.mask {
width: 100%;
background-color: rgba(0, 0, 0, 0.8);
position: fixed;
top: 0px;
left: 0px;
z-index: 200;
}
.show_d {
width: 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>
以上是关于js弹出层代码的主要内容，如果未能解决你的问题，请参考以下文章