<!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=utf-8" />
<title>无标题文件</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
html,body{
width:100%;
height:100%;
}
#mask{
position:absolute;
z-index:888;
background-color:#cccccc;
display:none;
top:0;
left:0;
filter:Alpha(opacity=50);/*此处用于IE不透明度为半透明百分比*/
-moz-opacity:0.5; /*此处用于火狐不透明数值*/
opacity:0.5;/*此处用于新版火狐不透明数值*/
}
#view{
position:absolute;
width:450px;
height:450px;
z-index:999;/*视图div的z-index要大于遮罩层的*/
display:none;
top:0px;
left:50%;
background-color:#ffffff;
border:1px solid green;
}
</style>
<script type="text/javascript">
function showDiv(){
var mask = document.getElementById("mask");
var view = document.getElementById("view");
/*计算出当前页面的大小*/
var h_c =document.documentElement.scrollHeight;
var w_c = document.documentElement.scrollWidth;
var h_b = document.body.scrollHeight;
var w_b = document.body.scrollWidth ;
var height = h_c > h_b ? h_c : h_b;
var width = w_c > w_b ? w_c : w_b;
/*显示遮罩层*/
mask.style.width = width+"px";
mask.style.height = height+"px";
mask.style.display = "block";
/*显示视图层*/
/*450为div的宽*/
view.style.left = (width-450)/2 + "px";
/*450为div的高*/
view.style.top = document.documentElement.scrollTop+(document.body.clientHeight-450)/2 + "px";
view.style.display="block";
}
function hiddenDiv(){
var view = document.getElementById("view");
view.style.display = "none";
var mask = document.getElementById("mask");
mask.style.display = "none";
}
</script>
</head>
<body>
<div>
<p>模拟原始页面,<a href="javascript:showDiv();">弹出窗口</a></p>
<p>模拟原始页面,<a href="javascript:showDiv();">弹出窗口</a></p>
<p>模拟原始页面,<a href="javascript:showDiv();">弹出窗口</a></p>
<p>模拟原始页面,<a href="javascript:showDiv();">弹出窗口</a></p>
</div>
<!--全屏覆盖-->
<div id="mask">
</div>
<div id="view"><a href="javascript:hiddenDiv();">关闭窗口</a></div>
</body>
</html>