精确定位浏览器内部可视区域大小并弹出遮罩层

wapysun

浏览: 21488214 次
性别:
来自: 杭州

最近访客更多访客>>

devcang

hunankeda110

辽东小小

apex53

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2012-06 ( 77)
2012-05 ( 587)
2012-04 ( 177)
更多存档...

代码：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>始终居中的弹出层</title> <script language="javascript" type="text/javascript"> var winWidth = 0; var winHeight = 0; function findDimensions(){ //函数：获取尺寸 //获取窗口宽度 if (window.innerWidth) winWidth = window.innerWidth; else if ((document.body) && (document.body.clientWidth)) winWidth = document.body.clientWidth; //获取窗口高度 if (window.innerHeight) winHeight = window.innerHeight; else if ((document.body) && (document.body.clientHeight)) winHeight = document.body.clientHeight; //通过深入Document内部对body进行检测，获取窗口大小 if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth){ winHeight = document.documentElement.clientHeight; winWidth = document.documentElement.clientWidth; } } function popupAlert(newDivID, width, height) { findDimensions(); //调用函数，获取数值 window.onresize=findDimensions; var newMaskID = "mask"; //遮罩层id var newMaskWidth = winWidth;//遮罩层宽度 var newMaskHeight = winHeight;//遮罩层高度 //mask遮罩层 var newMask = document.createElement("div");//创建遮罩层 newMask.id = newMaskID;//设置遮罩层id newMask.style.position = "absolute";//遮罩层位置 newMask.style.zIndex = "1";//遮罩层zIndex newMask.style.width = newMaskWidth + "px";//设置遮罩层宽度 newMask.style.height = newMaskHeight + "px";//设置遮罩层高度 newMask.style.top = "0px";//设置遮罩层于上边距离 newMask.style.left = "0px";//设置遮罩层左边距离 newMask.style.background = "black";//#33393C//遮罩层背景色 newMask.style.filter = "alpha(opacity=40)";//遮罩层透明度IE newMask.style.opacity = "0.40";//遮罩层透明度FF document.body.appendChild(newMask);//遮罩层添加到DOM中 //新弹出层 var newDivWidth = width;//新弹出层宽度 var newDivHeight = height;//新弹出层高度 var newDiv = document.createElement("div");//创建新弹出层 var newDivtop = (winHeight / 2 - newDivHeight / 2);//新弹出层距离上边距离 var newDivleft = (winWidth / 2 - newDivWidth / 2);//新弹出层距离左边距离 newDiv.id = newDivID;//设置新弹出层ＩＤ newDiv.style.position = "absolute";//新弹出层位置 newDiv.style.zIndex = "9999";//新弹出层zIndex newDiv.style.width = newDivWidth + "px";//新弹出层宽度 newDiv.style.height = newDivHeight + "px";//新弹出层高度 newDiv.style.top = newDivtop + "px";//新弹出层距离上边距离 newDiv.style.left = newDivleft + "px";//新弹出层距离左边距离 newDiv.style.background = "#EFEFEF";//新弹出层背景色 newDiv.style.border = "1px solid #860001";///新弹出层边框样式 newDiv.style.padding = "5px";//新弹出层 newDiv.innerHTML = document.getElementById(newDivID).innerHTML;//新弹出层内容 document.body.appendChild(newDiv);//新弹出层添加到DOM中 //弹出层滚动居中 function newDivCenter() { newDiv.style.top = (document.body.scrollTop + document.body.clientHeight / 2 - newDivHeight / 2) + "px"; newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth / 2 - newDivWidth / 2) + "px"; } //处理滚动事件，使弹出层始终居中 if (document.all){ window.attachEvent("onscroll", newDivCenter); } else { window.addEventListener('scroll', newDivCenter, false); } //关闭新图层和mask遮罩层 var newA = document.createElement("span"); newA.href = "#"; newA.style.position = "absolute";//span位置 newA.style.left = 350 + "px"; newA.innerHTML = "Close"; //处理关闭事件 newA.onclick = function(){ if (document.all) { window.detachEvent("onscroll", newDivCenter); } else { window.removeEventListener('scroll', newDivCenter, false); } document.body.removeChild(newMask);//移除遮罩层 document.body.removeChild(newDiv);////移除弹出框 return false; }; newDiv.appendChild(newA);//添加关闭span } </script> </head> <body> <div id="test">this is a test<br /> <input type="text" /> </div> <a onclick="popupAlert('test',500,300);" style="cursor: pointer">TestOpenDiv</a> </body> </html>

分享到：