js弹出的DIV任何时候都居中

最新推荐文章于 2023-04-03 16:21:54 发布

iteye_16958

最新推荐文章于 2023-04-03 16:21:54 发布

阅读量156

点赞数

分类专栏： javaScript 文章标签：浏览器 JavaScript CSS HTML Blog ViewUI

本文链接：https://blog.csdn.net/iteye_16958/article/details/81729632

版权

javaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

http://hi.baidu.com/eduing/blog/item/52818d163f2d8459f2de321e.html

一直都在想怎么样使弹出的DIV能在任何时候都是居中显示的，刚开始的时候是用CSS样式直接定义好层的位置，但是当页面很长的时候，或是浏览器窗口大小不是固定的时候就不能正确的显示，所以只好用JS来控制DIV的显示位置。

首先再次详细解释一下JS中窗口和网页的几种尺寸属性的含义

document.body.clientWidth（网页可见区域宽）：是指浏览器显示网页的区域宽度，不包括浏览器的边框宽度和垂直滚动条的宽度。大小随着浏览器的窗口大小而改变。

document.body.clientHeight（网页可见区域高）：是指浏览器显示网页的区域所能看到的高度，不包括浏览器的边框宽度和水平滚动条的高度。大小随着浏览器的窗口大小而改变。

document.body.scrollTop（网页被卷去的高）：是指拉动垂直滚动条时网页上面被地址栏及菜单栏遮盖着的部分的高。

document.body.scrollLeft（网页被卷去的左）：是指拉动水平滚动条时网页左面被左边线遮盖着的部分的宽。

现在我们来分析一下程序该如何实现：

第一步我们要实现的是使层在弹出时绝对居中不去考虑是否有滚动条的情况。

1.计算出层距离显示区域左边和上边的位置

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>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</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了，不过可能显示的效果不是很好，特别是在拖动滚动条时的效果可能是一擅一擅的，忒不爽。

iteye_16958

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js弹出的DIV任何时候都居中

http://hi.baidu.com/eduing/blog/item/52818d163f2d8459f2de321e.html一直都在想怎么样使弹出的DIV能在任何时候都是居中显示的，刚开始的时候是用CSS样式直接定义好层的位置，但是当页面很长的时候，或是浏览器窗口大小不是固定的时候就不能正确的显示，所以只好用JS来控制DIV的显示位置。首先再次详细解释一下JS中窗口和网页的几种尺寸...
复制链接

扫一扫

专栏目录