当前位置：网站首页 > 资源显示

js弹出层，漂浮层页面永远居中（水平，垂直都自动居中）

发布时间：2017/4/30 19:30:46 / 浏览：516

见完整代码

完整代码（代码框可以往下拉高显示）：

<html>
<head>
<style>
body{margin:0;padding:0;}
div{position:fixed;_position:absolute;}
#div1{width:300px; height:300px; background:red;}
#div2{width:200px; height:200px; background:yellow;}
#div3{width:100px; height:100px; background:blue;}
</style>
<meta charset="utf-8" />
<title>弹出层，漂浮层页面永远居中—张木木—前端工程师</title>
</head>
<body style="height:2000px;">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<script>
window.onresize=window.onload=window.onscroll=function (){
 center("div1");
 center("div2");
 center("div3");
};
function center(obj){
 var div1=document.getElementById(obj);
 div1.style.top=(document.documentElement.clientHeight-div1.offsetHeight)/2+"px";
 div1.style.left=(document.documentElement.clientWidth-div1.offsetWidth)/2+"px";
}
</script>

1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
1111111111
</body>
</html>

附件资源（免费）

您尚未登录，暂时无法查阅资源！立即登录

插播广告区

发表评论

您尚未登录，暂时无法发表评论。立即登录

暂无任何评论

推荐资源更多 >>

付费资源更多 >>

广告区