JS弹出居中的DIV的代码 -

chengxuetao

浏览: 1658096 次
性别:

最近访客更多访客>>

whzresponse

u012363178

wangyy

zhangdongl

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

JS弹出居中的DIV的代码

博客分类：

JavaScript

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

首先再次详细解释一下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>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>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

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

分享到：

Js弹出窗口、居中、居角、扩大窗口至屏幕最 ... | CSS 盒模型

2009-09-15 11:40
浏览 914
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JS弹出居中的DIV的代码

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JS弹出居中的DIV的代码

评论

发表评论

相关推荐

Javascript评估用户输入密码的强度的方法 代码

图片和文字放一起，不能居中的解决方法

解开JavaScript生命的达芬奇密码

掌控上传进度的AJAX Upload（转贴）

Javascript跨域访问解决方案

不唐突的JavaScript的七条准则(转载)

浅谈Javascript中的事件流和事件绑定

JavaScript继承详解（二）

JavaScript继承详解（一）

javascript实用技巧--数组.

IE和Firefox之间的JavaScript差异

常见的JavaScript错误

JS获取浏览器窗口大小 获取屏幕，浏览器，网页高度宽度

Javascript的Defer属性

最佳的"addEvent"是怎样诞生的

值得推荐的事件捕获函数AddEvent()

随滚动条移动的层

javascript 获取滚动条高度

如何去掉ie里面的关闭按钮,和屏蔽ALT+F4 (转载)

（window.onunload）只有点击浏览器右上角关闭按钮才执行

最近访客更多访客>>

Javascript评估用户输入密码的强度的方法代码

JS获取浏览器窗口大小获取屏幕，浏览器，网页高度宽度