快捷導(dǎo)航

JS彈出居中的DIV的代碼

更新時(shí)間：2008年06月15日 19:35:41 作者：

一直都在想怎么樣使彈出的DIV能在任何時(shí)候都是居中顯示的，剛開(kāi)始的時(shí)候是用CSS樣式直接定義好層的位置，但是當(dāng)頁(yè)面很長(zhǎng)的時(shí)候，或是瀏覽器窗口大小不是固定的時(shí)候就不能正確的顯示，所以只好用JS來(lái)控制DIV的顯示位置。

首先再次詳細(xì)解釋一下JS中窗口和網(wǎng)頁(yè)的幾種尺寸屬性的含義
document.body.clientWidth（網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)挘菏侵笧g覽器顯示網(wǎng)頁(yè)的區(qū)域?qū)挾龋话g覽器的邊框?qū)挾群痛怪睗L動(dòng)條的寬度。大小隨著瀏覽器的窗口大小而改變。
document.body.clientHeight（網(wǎng)頁(yè)可見(jiàn)區(qū)域高）：是指瀏覽器顯示網(wǎng)頁(yè)的區(qū)域所能看到的高度，不包括瀏覽器的邊框?qū)挾群退綕L動(dòng)條的高度。大小隨著瀏覽器的窗口大小而改變。
document.body.scrollTop（網(wǎng)頁(yè)被卷去的高）：是指拉動(dòng)垂直滾動(dòng)條時(shí)網(wǎng)頁(yè)上面被地址欄及菜單欄遮蓋著的部分的高。
document.body.scrollLeft（網(wǎng)頁(yè)被卷去的左）：是指拉動(dòng)水平滾動(dòng)條時(shí)網(wǎng)頁(yè)左面被左邊線遮蓋著的部分的寬。
現(xiàn)在我們來(lái)分析一下程序該如何實(shí)現(xiàn)：

第一步我們要實(shí)現(xiàn)的是使層在彈出時(shí)絕對(duì)居中不去考慮是否有滾動(dòng)條的情況。
1.計(jì)算出層距離顯示區(qū)域左邊和上邊的位置
注意：divId指的是所要居中的層,divId.clientWidth為其寬度?。?nbsp;
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;
說(shuō)明：divId為DIV標(biāo)簽的id值
這樣這個(gè)層就是居中顯示的了。
第二步我們要實(shí)現(xiàn)的是使在拖動(dòng)滾動(dòng)條的情況下彈出的層也能居中。
其實(shí)很簡(jiǎn)單我們只要把拖動(dòng)的寬度和高度加到前面計(jì)算出來(lái)的左邊距和上邊距中就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;
這樣顯示出來(lái)就是居中的了。
完整代碼如下：

<!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=""> </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 class="vvxyksv9kd" id=mxh style="position:absolute;left:200px;top:30px;width:200px;height:200px;background -color:navy;border:2px">我是居中顯示的了。</div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

如果你想在拖動(dòng)滾動(dòng)條或是窗口重置大小時(shí)，層也能居中顯示的話，可以在body的屬性里面加上onresize="divcenter();"和 onscroll="divcenter();"就OK了，不過(guò)可能顯示的效果不是很好，特別是在拖動(dòng)滾動(dòng)條時(shí)的效果可能是一擅一擅的，忒不爽。

您可能感興趣的文章: