可移动的带遮罩的弹出层

/**
 * ----div----dialog-----------------
 * ---支持IE6以上版本,google,firefox(不支持拖动)---
 * --只需要调用openDialog,closeDialog
 */
var idialog = null;
function alertDialog(content){
	var title="提示";
	var contentHtml="<div style='font-family: Verdana, Arial, Helvetica, sans-serif;margin-left: 20%;margin-top: 20%;'>"+content+"</div>"
	+"<div style='line-height: 20px;margin-left: 68%;margin-top: 30px;'><input type='button' style='line-height: 25px;border: 0px;' onclick='closeDialog()' value='确认'/></div>";
	openDialog(title,contentHtml);
}
function openDialog(title,contentHtml){
	var w=300;
	var h=200;
	var s=true;//是否要遮罩
	
	idialog=new IDialog(w,h,s,title,contentHtml);
	idialog.open();
}
//------------close--dialog--------------
function closeDialog(){
	//document.getElementById(screenID).style.display="none";
	//document.getElementById(dialogID).style.display="none";
	document.body.removeChild(document.getElementById(screenID));
	document.body.removeChild(document.getElementById(dialogID));
	idialog=null;
}

//----v-----
var screenID="screenID";
var dialogID="dialogID";
var titleID="titleID";
//-----new a object---
IDialog=function(w,h,s,title,contentHtml){
	//var screenh=window.screen.height;//屏幕分辨率的高：
	//var screenw=window.screen.width;//屏幕分辨率的宽：
//	var bow = document.body.offsetWidth;
//	var boh = document.body.offsetHeight;
	var bw = document.documentElement.clientWidth;
	var bh = document.documentElement.clientHeight;
	var top = document.documentElement.clientTop;
//	var bw = document.documentElement.scrollWidth;
//	var bh = document.documentElement.scrollHeight;
//	var top = document.documentElement.scrollTop;
	if(bh<h*2){
		bh=h*2;
	}
	//---------background---------
	var myScreen = document.createElement("div");
	myScreen.setAttribute("id", screenID);
	myScreen.style.backgroundColor = "#000000";
	myScreen.style.left = "0px";
	myScreen.style.right = "0px";
	myScreen.style.top = "0px";
	myScreen.style.bottom = "0px";
	myScreen.style.width = bw+"px";
	myScreen.style.height = bh+"px";
	myScreen.innerHTML = "";
	myScreen.style.position = "absolute";
	myScreen.style.zIndex = "100";
	myScreen.style.display = "none";
	if(s){
		myScreen.style.opacity = "0.5";
	}else{
		myScreen.style.opacity = "0.0";
	}
	
	
	//-----------dialog---------------
	var myDialog = document.createElement("div");
	myDialog.setAttribute("id", dialogID);
	myDialog.style.backgroundColor = "#D9D9D9";
	myDialog.style.zIndex = "1020";
	myDialog.style.display = "none";
	myDialog.style.left = (bw - w) / 2 + "px";
	myDialog.style.top = top + (bh - h) / 2 + "px";
//window.pageYOffset 当前窗口左上角坐标，是弹出层始终在当前窗口中间
//myDialog.style.top =  window.pageYOffset + (document.documentElement.clientHeight - h) / 2 + "px";//注意：bw使用scrollWidth，bh使用scrollHeight
	myDialog.style.width = w+"px";
	myDialog.style.height = h+"px";
	myDialog.style.color = "#890987";
	myDialog.style.border="1px solid #87CEFF";
	myDialog.style.position = "absolute";
	//标题title
	var titleDiv = document.createElement("div");
	titleDiv.style.cssText="width: 100%;line-height: 23px;background-color:#E3E3E3; ";
	titleDiv.innerHTML="<table><tr><td width='98%'>&nbsp;&nbsp;&nbsp;<label>"+title+"</label></td><td width='2%;'>"
		+"<input type='button' style='border: 0;background-color:#D6D6D6;height: 20px;width:20px;' value='x' onclick='closeDialog()'/>"
		+"</td></tr></table>";
	myDialog.appendChild(titleDiv);
	titleDiv.onmousedown=function(){
		move(myDialog,event);
	};
	//内容content
	var contentDiv=document.createElement("div");
	contentDiv.innerHTML =contentHtml;
	myDialog.appendChild(contentDiv);
	
	//----add element to  body-----
	document.body.appendChild(myDialog);
	document.body.appendChild(myScreen);
	
	
	//---resize with window------随着window改变大小
	window.onresize=function(){
		//screen
		//myScreen.style.width = document.documentElement.scrollWidth+"px";
		//myScreen.style.height = document.documentElement.scrollHeight+"px";
		myScreen.style.width = document.documentElement.clientWidth+"px";
		myScreen.style.height = document.documentElement.clientHeight+"px";
		//dialog
//		myDialog.style.left = (document.documentElement.scrollWidth - w) / 2 + "px";
//		myDialog.style.top = document.documentElement.scrollTop + (document.documentElement.scrollHeight - h) / 2 + "px";
		myDialog.style.left = (document.documentElement.clientWidth - w) / 2 + "px";
		myDialog.style.top = document.documentElement.clientTop + (document.documentElement.clientHeight - h) / 2 + "px";
//		I("info").innerHTML=document.documentElement.clientWidth+"--"+document.documentElement.scrollWidth
//		+"--"+document.documentElement.clientHeight+"--"+document.documentElement.scrollHeight;
	};
	
};
//------------open--dialog-------------- 
IDialog.prototype.open = function() {
	
	document.getElementById(screenID).style.display = "block";
	document.getElementById(dialogID).style.display = "block";
};

//----------drag-----start--------
var a,b,c;//a--移动对象,(b,c)--鼠标点击点相对于移动对象的坐标
document.onmouseup=function(){
    if(!a)return;
    document.all?a.releaseCapture():window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
    a="";
};
//---every time listening  mouse move--
document.onmousemove=function (d){
    if(!a) return;
    if(!d) d=event;
	var g=parseInt(a.style.width.replace("px",""));
	var h=parseInt(a.style.height.replace("px",""));
	var m=(d.clientX-b);
	var n=(d.clientY-c);
	
//	var e = document.body.scrollWidth;
//	var f = document.body.scrollHeight;
	var o=document.documentElement.clientWidth;
	var p=document.documentElement.clientHeight;
	//I("info").innerHTML=b+"--"+c+"--"+m+"---"+n+"--"+g+"--"+h+"--"+o+"--"+p; 
	if(m>0&&n>0&&(m+g)<o&&(n+h)<p){
		a.style.left=m+"px";
		a.style.top=n+"px";
		
	}
	
};

function move(o,e){
	a=o;
    document.all?a.setCapture():window.captureEvents(Event.MOUSEMOVE);
    b=e.clientX-parseInt(a.style.left);
    c=e.clientY-parseInt(a.style.top);
    o.style.zIndex=3000+1;
    
}
//----------drag-----end--------