直接上代码:
(html 有两个div backgroundPopup和fordetail)
css美工设计 与我无关
<style type="text/css">
#backgroundPopup{
display:none;
position:fixed;
_position:absolute;
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#fordetail{
z-index:2;
}
#popupContactClose{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
}
</style>
<script type="text/javascript" language="javascript">
//初始化:是否开启DIV弹出窗口功能
//0 表示开启; 1 表示不开启;
var popupStatus = 0;
function loadPopup(){
if(popupStatus==0){
$("#backgroundPopup").css({
"opacity": "0.7"
});
$("#backgroundPopup").fadeIn("slow");
$("#fordetail").fadeIn("slow");
//获取系统变量
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
popupHeight = $("#fordetail").height();
popupWidth = $("#fordetail").width();
//居中设置
$("#fordetail").css({
"position": "absolute",
"top": windowHeight/2-popupHeight/2+document.documentElement.scrollTop,
"left": windowWidth/2-popupWidth/2
});
//以下代码仅在IE6下有效
$("#backgroundPopup").css({
"height": windowHeight
});
popupStatus = 1;
}
}
//使用Jquery去除弹窗效果
function disablePopup(){
//仅在开启标志popupStatus为1的情况下去除
if(popupStatus==1){
$("#backgroundPopup").fadeOut("slow");
$("#fordetail").fadeOut("slow");
popupStatus = 0;
}
}
</script>
关于获取高度和宽度的小补充(复制粘贴以防链接丢失:http://apps.hi.baidu.com/share/detail/24018719):
关于获取各种浏览器可见窗口大小的一点点研究
<script>
function getInfo()
{
var s = "";
s = " 网页可见区域宽:" document.body.clientWidth;
s = " 网页可见区域高:" document.body.clientHeight;
s = " 网页可见区域宽:" document.body.offsetWidth " (包括边线和滚动条的宽)";
s = " 网页可见区域高:" document.body.offsetHeight " (包括边线的宽)";
s = " 网页正文全文宽:" document.body.scrollWidth;
s = " 网页正文全文高:" document.body.scrollHeight;
s = " 网页被卷去的高(ff):" document.body.scrollTop;
s = " 网页被卷去的高(ie):" document.documentElement.scrollTop;
s = " 网页被卷去的左:" document.body.scrollLeft;
s = " 网页正文部分上:" window.screenTop;
s = " 网页正文部分左:" window.screenLeft;
s = " 屏幕分辨率的高:" window.screen.height;
s = " 屏幕分辨率的宽:" window.screen.width;
s = " 屏幕可用工作区高度:" window.screen.availHeight;
s = " 屏幕可用工作区宽度:" window.screen.availWidth;
s = " 你的屏幕设置是 " window.screen.colorDepth " 位彩色";
s = " 你的屏幕设置 " window.screen.deviceXDPI " 像素/英寸";
//alert (s);
}
getInfo();
</script>
在我本地测试当中:
在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的标准在作怪啊
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "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 ==> 可见区域高度
在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高)
而如果没有定义W3C的标准,则
IE为:
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
FireFox为:
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
Opera为:
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
分享到:
相关推荐
js弹出层居中可移动 js弹出层居中可移动
javascript 弹出层居中效果的制作 * { padding:0; margin:0; list-style:none; } body { font-family:Verdana, Geneva, sans-serif; font-size:14px; } #a { width:300px; height:80px; border:5px solid #d3d3d3...
js弹出层绝对居中(ie,火狐都支持)在不同浏览器上显示效果一样
兼容ie,FF,chrome,opera的弹出层居中js。
1. 弹出绝对居中层 2. 企业级应用标准,支持SharePoint 3. 基于ASP.ENT, JavaScript, CSS开发
js+CSS实现弹出居中背景半透明div层的方法.docx
jquery弹出层当鼠标点击文字或图片弹出层,弹出层浮动在屏幕上可以随浏览器上下滚动,弹出层可自动居中在页面中间
有js+css和jquery+css实现的弹出居中的遮罩层,兼容IE6 7 8 和ff
jQuery.UI.Impromptu.js jQuery 弹出层 浮动层 提示框 并随页面滚动而滚动 实现弹出层不再难,只要引用jQuery.UI.Impromptu.js这个js文件后,想要弹出哪个tag都行了 如:我想要这里是弹出浮动遮罩层</div> 并随页面...
jQuery点击遮罩弹出层固定居中代码是一款自适应的图片加文字遮罩弹窗代码,适用于手机端的网页遮罩弹出层代码。
jQuery弹出层垂直居中效果.zip
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动).docx
支持弹出层的鼠标拖动移动,该部分用纯js编写执行效率更高 支持ajax加载页面到弹出层 支持一个页面,同时弹出多个层互不干扰 支持模式化弹出,带遮罩层 支持自定义弹出层样式 自带3个事件,开启、关闭、移除 ...
弹出层永远居中的方法有很多,在本文为大家详细介绍下使用js是如何轻松实现的,喜欢的朋友可以参考下
介绍了Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法,有需要的朋友可以参考一下
主要介绍了JS弹出层的绝对定位居中是如何实现的,需要的朋友可以参考下
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动) 代码如下: <!doctype html> <head> <meta charset=”utf-8″ /> <title></title> <style type=”text/css”> *{}{margin:0;...