JS彈出居中的DIV的代碼

2024-05-06 14:17:47

字體：大中小

供稿：網(wǎng)友

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

第一步我們要實現(xiàn)的是使層在彈出時絕對居中不去考慮是否有滾動條的情況。
1.計算出層距離顯示區(qū)域左邊和上邊的位置
注意：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標(biāo)簽的id值
這樣這個層就是居中顯示的了。
第二步我們要實現(xiàn)的是使在拖動滾動條的情況下彈出的層也能居中。
其實很簡單我們只要把拖動的寬度和高度加到前面計算出來的左邊距和上邊距中就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="http://m.survivalescaperooms.com/"/> <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> </SPAN> </div> </div> <div id="iwvjtn8m0" class=page1> <p align="center" class="pageLink"></p> </div> <div id="iwvjtn8m0" class="fenxiang">  <div style="text-align:left">上一篇：<a href='/wen/2024/05-06/1045591.html'>json簡單介紹</a></div> <br> <div style="text-align:left">下一篇：<a href='/wen/2024/05-06/1045593.html'>css+js實現(xiàn)select列表橫向排列效果代碼</a></div> <br> <script src=/d/js/acmsd/gao21.js></script>  </div> <div id="iwvjtn8m0" class="pinglun">  <script> function CheckPl(obj) { if(obj.saytext.value=="") { alert("您沒什么話要說嗎？"); obj.saytext.focus(); return false; } return true; } </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)"> <table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost"> <tr> <td><table width="100%" border="0" cellpadding="0" cellspacing="0" class="title"> <tr> <td><strong>發(fā)表評論</strong></td> <td align="right"><a href="/e/pl/?classid=338&id=1045592">共有<span><script type="text/javascript" src="/e/public/ViewClick/?classid=338&id=1045592&down=2"></script></span>條評論</a></td> </tr> </table> <table width="100%" border="0" cellspacing="10" cellpadding="0"> <tr> <td><table width="100%" border="0" cellpadding="0" cellspacing="2"> <tr> <td width="56%" align="left">用戶名: <input name="username" type="text" class="inputText" id="username" value="" size="16" /></td> <td width="44%" align="left">密碼: <input name="password" type="password" class="inputText" id="password" value="" size="16" /></td> </tr> <tr> <td align="left">驗證碼: <input name="key" type="text" class="inputText" size="10" /> <img src="/e/ShowKey/?v=pl" align="absmiddle" /> </td> <td align="left"><input name="nomember" type="checkbox" id="nomember" value="1" checked="checked" /> 匿名發(fā)表</td> </tr> </table> <textarea name="saytext" cols="70" rows="6" id="saytext">