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

最新推荐文章于 2024-07-08 09:31:33 发布

teemai

最新推荐文章于 2024-07-08 09:31:33 发布

阅读量2.6k

点赞数

分类专栏：前端开发专题文章标签：浏览器 function scroll xhtml javascript div

本文链接：https://blog.csdn.net/withiter/article/details/7255666

版权

前端开发专题专栏收录该内容

33 篇文章 1 订阅

订阅专栏

代码：

<%@ 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.οnresize=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 οnclick="popupAlert('test',500,300);" style="cursor: pointer">TestOpenDiv</a>
</body>
</html>