JS弹出居中的DIV的代码，跟着下拉条居中

最新推荐文章于 2021-06-11 15:59:54 发布

godbessinyou

最新推荐文章于 2021-06-11 15:59:54 发布

阅读量189

点赞数

分类专栏： css+javascript 文章标签： div居中

本文链接：https://blog.csdn.net/godbessinyou/article/details/84391809

版权

css+javascript 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

首先再次详细解释一下JS中窗口和网页的几种尺寸属性的含义
document.body.clientWidth（网页可见区域宽）：是指浏览器显示网页的区域宽度，不包括浏览器的边框宽度和垂直滚动条的宽度。大小随着浏览器的窗口大小而改变。
document.body.clientHeight（网页可见区域高）：是指浏览器显示网页的区域所能看到的高度，不包括浏览器的边框宽度和水平滚动条的高度。大小随着浏览器的窗口大小而改变。
document.body.scrollTop（网页被卷去的高）：是指拉动垂直滚动条时网页上面被地址栏及菜单栏遮盖着的部分的高。
document.body.scrollLeft（网页被卷去的左）：是指拉动水平滚动条时网页左面被左边线遮盖着的部分的宽。
现在我们来分析一下程序该如何实现：

第一步我们要实现的是使层在弹出时绝对居中不去考虑是否有滚动条的情况。
1.计算出层距离显示区域左边和上边的位置
注意：divId指的是所要居中的层,divId.clientWidth为其宽度！＠
var divId = document.getElementById("xxx");
var v_left=(document.body.clientWidth-divId.clientWidth)/2;
var v_top=(document.body.clientHeight-divId.clientHeight)/2;
2.把得到的值重新赋给DIV的left和top属性
divId.style.left＝v_left;
divId.style.top=v_top;
说明：divId为DIV标签的id值
这样这个层就是居中显示的了。
第二步我们要实现的是使在拖动滚动条的情况下弹出的层也能居中。
其实很简单我们只要把拖动的宽度和高度加到前面计算出来的左边距和上边距中就OK 了。
v_left+=document.body.scrollLeft;
v_top+=document.body.scrollTop;
2.把得到的值重新赋给DIV的left和top属性
divId.style.left＝v_left;
divId.style.top=v_top;
这样显示出来就是居中的了。
完整代码如下：

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">   
<html>   
<head>   
<title>弹出的层居中显示</title>   
<meta name="generator" content="editplus">   
<meta name="author" content="">   
<meta name="keywords" content="">   
<meta name="description" content="">   
<script language="javascript" type="text/javascript">   
function divcenter()   
{   
var divId=document.getElementById('mxh');   
divId.style.left=(document.body.clientWidth-divId.clientWidth)/2+document.body.scrollLeft;   
divId.style.top=(document.body.clientHeight-divId.clientHeight)/2+document.body.scrollTop;   
}   
</script>   
</head>   

<body>   
<table width=100%>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
<tr><td><span οnclick="divcenter()">test</span></td></tr>   
</table>   
<div id=mxh style="position:absolute;left:200px;top:30px;width:200px;height:200px;background -color:navy;border:2px">我是居中显示的了。</div>   
</body>   
</html>

如果你想在拖动滚动条或是窗口重置大小时，层也能居中显示的话，可以在body的属性里面加上οnresize="divcenter();"和 οnscrοll="divcenter();"就OK了，不过可能显示的效果不是很好，特别是在拖动滚动条时的效果可能是一擅一擅的，忒不爽。
注意：

运行后没有达到预期效果，输出 document.body.scrollTop 的值一看，一直都是 0。一翻折腾，原来是 DTD 的问题，要是页面直接用 <html> 开头的话就没有问题了。但是要符合 web 标准，DTD 当然是不能少的。

如果有 DTD 时用，那就用 document.documentElement.scrollTop 代替 document.body.scrollTop 就可以了。

我在项目上使用的代码：

有DTD把body改成documentElement。

 function sc1(DivId) {
            //alert(document.documentElement.scrollTop);
            var Div = $(DivId);
            //alert( (document.body.clientHeight-document.getElementById("editMemberDiv").clientHeight)/2+document.documentElement.scrollTop-200);
            Div.css({
            "top":function (){return (document.documentElement.clientHeight-document.getElementById("editMemberDiv").clientHeight)/2+document.documentElement.scrollTop-200;},
            "left":function(){return (document.documentElement.clientWidth-document.getElementById("editMemberDiv").clientWidth)/2+document.documentElement.scrollLeft;}
            });

        }
        function scall() {
            sc1("#editMemberDiv");
        }

        window.onscroll = scall;
        window.onresize = scall;
        window.οnlοad=scall;

godbessinyou

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS弹出居中的DIV的代码，跟着下拉条居中

首先再次详细解释一下JS中窗口和网页的几种尺寸属性的含义 document.body.clientWidth（网页可见区域宽）：是指浏览器显示网页的区域宽度，不包括浏览器的边框宽度和垂直滚动条的宽度。大小随着浏览器的窗口大小而改变。 document.body.clientHeight（网页可见区域高）：是指浏览器显示网页的区域所能看到的高度，不包括浏览器的边框宽度和水平滚动条的高度。大小随着...
复制链接

扫一扫

专栏目录