1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  5. <title>弹出层任可时候都居中javascript代码</title> 
  6. <style type="text/css"> 
  7. #opendiv{ display:none;position:absolute; z-index:9999; width:400px; height:120px; background:#6C6;} 
  8. </style> 
  9. <script type="text/javascript"> 
  10.  
  11. function showdiv(){ 
  12. //得到可见的宽度和高度 
  13. var swidth=document.documentElement.clientWidth; 
  14. var sheight=document.documentElement.clientHeight; 
  15.  
  16. var openv=document.getElementById("opendiv") 
  17. openv.style.display="block";//先可见才能设clientWidth(可见宽度)，所以这句一定在设client前面 
  18. var divwidth=document.getElementById("opendiv").clientWidth; 
  19. var divheight=document.getElementById("opendiv").clientHeight; 
  20. openv.style.top=(sheight-divheight)/2+document.documentElement.scrollTop+"px"; 
  21. openv.style.left=(swidth-divwidth)/2+document.documentElement.scrollLeft+"px"; 
  22. } 
  23. </script> 
  24. </head> 
  25.  
  26. <body> 
  27. <div style="height:1900px;"></div> 
  28. <div id="opendiv"></div> 
  29. <span onclick="showdiv()">sdfsdf</span> 
  30. </body> 
  31. </html> 
 
  
 参考知识：
 
  
 
  
四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异

 网页可见区域宽：document.body.clientWidth 
 网页可见区域高：document.body.clientHeight 
 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 
 网页可见区域高：document.body.offsetHeight (包括边线的宽) 
 网页正文全文宽：document.body.scrollWidth 
 网页正文全文高：document.body.scrollHeight 
 网页被卷去的高：document.body.scrollTop 
 网页被卷去的左：document.body.scrollLeft 
 网页正文部分上：window.screenTop 
 网页正文部分左：window.screenLeft 
 屏幕分辨率的高：window.screen.height 
 屏幕分辨率的宽：window.screen.width 
 屏幕可用工作区高度：window.screen.availHeight 
 屏幕可用工作区宽度：window.screen.availWidth

 这里说说四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解释。

 这四种浏览器分别为IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。

 clientHeight
 四种浏览器对 clientHeight 的解释都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。

 offsetHeight
 IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
 NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。

 scrollHeight
 IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。
 NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。

 简单地说
 clientHeight 就是透过浏览器看内容的这个区域高度。
 NS、FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于 clientHeight 时，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。
 IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。

 同理
 clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同，只是把高度换成宽度即可。


 注：以上也是转的，对自己有点参考而已，有些值要跟据页面方式而定！我用的Ajax就完全没法用上面的方法定高！

 javaScript窗口属性：
 
  
网页可见区域宽：document.body.clientWidth
 网页可见区域高：document.body.clientHeight
 网页可见区域宽：document.body.offsetWidth (包括边线的宽)
 网页可见区域高：document.body.offsetHeight (包括边线的宽)
 网页正文全文宽：document.body.scrollWidth
 网页正文全文高：document.body.scrollHeight
 网页被卷去的高：document.body.scrollTop
 网页被卷去的左：document.body.scrollLeft
 网页正文部分上：window.screenTop
 网页正文部分左：window.screenLeft
 屏幕分辨率的高：window.screen.height
 屏幕分辨率的宽：window.screen.width
 屏幕可用工作区高度：window.screen.availHeight
 屏幕可用工作区宽度：window.screen.availWidth


 在IE、FireFox、Opera下都可以使用
 document.body.clientWidth
 document.body.clientHeight
 即可获得，很简单，很方便。
 而在公司项目当中：
 Opera仍然使用
 document.body.clientWidth
 document.body.clientHeight
 可是IE和FireFox则使用
 document.documentElement.clientWidth
 document.documentElement.clientHeight
 原来是W3C的标准在作怪啊
 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 如果在页面中添加这行标记的话

 在IE中：
 document.body.clientWidth ==> BODY对象宽度
 document.body.clientHeight ==> BODY对象高度
 document.documentElement.clientWidth ==> 可见区域宽度
 document.documentElement.clientHeight ==> 可见区域高度
 注：在IE中“可见区域”基本不认可body，而必需使用documentElement！！！！

 在FireFox中：
 document.body.clientWidth ==> BODY对象宽度
 document.body.clientHeight ==> BODY对象高度
 document.documentElement.clientWidth ==> 可见区域宽度
 document.documentElement.clientHeight ==> 可见区域高度

 在Opera中： 
 document.body.clientWidth ==> 可见区域宽度
 document.body.clientHeight ==> 可见区域高度
 document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
 document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

 获取窗口高宽：
 var w= document.documentElement.offsetWidth;
 var h=document.documentElement.offsetHeight;