<!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>
<title>遮罩层</title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<meta name="Designer" content="cssrain" />
<meta name="Designer mail" content="cssrain@gmail.com" />
<meta name="Keywords" content="遮罩层" />
<meta name="Description" content="遮罩层" />
<style>
*{padding:0; margin:0} /*此行样式一定要加，不然可能会引起BUG出现。*/
#MyDiv{
position:absolute;
width:200px;
height:200px;
font-size:12px;
background:#666;
border:1px solid #000;
z-index:10001;
display:none;
text-align:center;
}
</style>
<script src="dom-drag.js" type="text/javascript"></script>
<script language="javascript" >
//创建遮罩层
function AlertMsg(){
/**第一步：创建DIV遮罩层。*/
var sWidth,sHeight;
sWidth = window.screen.availWidth;
//屏幕可用工作区高度： window.screen.availHeight;
//屏幕可用工作区宽度： window.screen.availWidth;
//网页正文全文宽： document.body.scrollWidth;
//网页正文全文高： document.body.scrollHeight;
if(window.screen.availHeight > document.body.scrollHeight){ //当高度少于一屏
sHeight = window.screen.availHeight;
}else{//当高度大于一屏
sHeight = document.body.scrollHeight;
}
//创建遮罩背景
var maskObj = document.createElement("div");
maskObj.setAttribute('id','BigDiv');
maskObj.style.position = "absolute";
maskObj.style.top = "0";
maskObj.style.left = "0";
maskObj.style.background = "#777";
maskObj.style.filter = "Alpha(opacity=30);";
maskObj.style.opacity = "0.3";
maskObj.style.width = sWidth + "px";
maskObj.style.height = sHeight + "px";
maskObj.style.zIndex = "10000";
document.body.appendChild(maskObj);
/**第二步：动态设置div的上边距和左边距，使弹出div居中打开。*/
var MyDiv =document.getElementById("MyDiv");
var MyDiv_w = getStyle(MyDiv,"width");
var MyDiv_h = getStyle(MyDiv,"height");
MyDiv_w = parseInt(MyDiv_w); //去掉 单位 "px"
MyDiv_h = parseInt(MyDiv_h);
var width = pageWidth();
var height = pageHeight();
var left = leftPosition();
var top = topPosition();
var Div_topposition = top + (height / 2) - (MyDiv_h / 2); //计算上边距
var Div_leftposition = left + (width / 2) - (MyDiv_w / 2); //计算左边距
MyDiv.style.left = Div_leftposition + "px"; //拼接上 单位"px"
MyDiv.style.top = Div_topposition + "px";
MyDiv.style.display = "block"; //设置弹出div显示
}
/**第三步：关闭窗口和遮罩层。*/
function CloseDiv(){
var Bigdiv = document.getElementById("BigDiv");
var Mydiv = document.getElementById("MyDiv");
document.body.removeChild(Bigdiv);
Mydiv.style.display="none";
}
/** 第四步：弹出层拖动。*/
window.onload = function(){
if(document.getElementById("MyDiv")){
var MyDiv = document.getElementById("MyDiv");
var dragMe = document.getElementById("dragMe");
Drag.init(dragMe, MyDiv);
}
}
/**第五步：弹出层跟随滚动条滚动。*/
window.onscroll = window_onscroll;
function window_onscroll(){
var MyDiv =document.getElementById("MyDiv");
var MyDiv_h = getStyle(MyDiv,"height");
MyDiv_h = parseInt(MyDiv_h);
var height = pageHeight();
var top = topPosition();
var Div_topposition = top + (height / 2) - (MyDiv_h / 2); //计算上边距
MyDiv.style.top = Div_topposition + "px";
}
/**
下面都是常用函数，已经收录在我的jsskep.js中。可以在里面找到。
工程地址：http://code.google.com/p/jsskep/
**/
// 计算当前窗口的宽度 //
function pageWidth(){
return window.innerWidth != null ? window.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;
}
// 计算当前窗口的高度 //
function pageHeight(){
return window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body != null? document.body.clientHeight : null;
}
// 计算当前窗口的上边滚动条//
function topPosition(){
return typeof window.pageYOffset != 'undefined' ? window.pageYOffset : document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ? document.body.scrollTop : 0;
}
// 计算当前窗口的左边滚动条//
function leftPosition(){
return typeof window.pageXOffset != 'undefined' ? window.pageXOffset : document.documentElement && document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ? document.body.scrollLeft : 0;
}
//解决外嵌样式style , 用js获取不到的问题。
function getStyle(elem, name){
if(elem.style[name])
return elem.style[name];
else if(elem.currentStyle) //ie
return elem.currentStyle[name];
else if(document.defaultView && document.defaultView.getComputedStyle){ //w3c
name = name.replace(/([A-Z])/g,"-$1");
name = name.toLowerCase();
var s = document.defaultView.getComputedStyle(elem,"");
return s && s.getPropertyValue(name);
} else
return null
}
</script>
</head>
<body>
<select></select>
<p onclick="AlertMsg()">open</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<p onclick="AlertMsg()">open</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<p onclick="AlertMsg()">open</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div id="MyDiv">
<input type="button" value="关闭" onclick="CloseDiv()"/>
<div id="dragMe" style="cursor:move;background:#ff6500">这里才可以拖动.</div>
<input type="text" />
</div>
</body>
</html>
