可移动的带遮罩的弹出层
/** * ----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";myDialog.style.width = w+"px";myDialog.style.height = h+"px";myDialog.style.color = "#890987";myDialog.style.border="1px solid #87CEFF";myDialog.style.position = "absolute";//标题titlevar titleDiv = document.createElement("div");titleDiv.style.cssText="width: 100%;line-height: 23px;background-color:#E3E3E3; ";titleDiv.innerHTML="<table><tr><td width='98%'>   <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);};//内容contentvar 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--------

?