一个自定义模态窗口的js类(用div实现)

在网上看过一些用div实现模态窗口的例子，感觉不是很完整，用起来不太方便，呵呵，所以就在前人的基础上将这种自定义模态窗口组件化了。希望能给大家带来帮助，有什么欠缺的地方欢迎指正

 

模态窗口类(SubWindow.js)

 function SubWindow(titleMsg,content,winWidth,winHeight,borderColor,titleColor,backgroundColor){ this.titleMsg=titleMsg; //标题信息 this.content=content; //窗体内容 this.winWidth=winWidth||"400px"; //提示窗口的宽度 this.winHeight=winHeight||"100px"; //提示窗口的高度 this.borderColor=borderColor||"#336699"; //提示窗口的边框颜色 this.titleColor=titleColor||"#336699"; //提示窗口的标题颜色 this.backgroundColor=backgroundColor||"FFF"; //提示窗口的背景颜色 } //显示子窗口 SubWindow.prototype.show=function(){ var subwin=this; //创建模态背景 var bgObj=document.createElement("div"); bgObj.setAttribute('id','bgDiv'); bgObj.style.position="absolute"; //bgObj.style.width=document.body.clientWidth; //bgObj.style.height=document.body.clientHeight; bgObj.style.width="100%"; bgObj.style.height="100%"; bgObj.style.left=document.body.scrollLeft; bgObj.style.top=document.body.scrollTop; bgObj.style.background="#777"; bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=15,finishOpacity=55)"; bgObj.style.opacity="0.6"; bgObj.style.zIndex = "10000"; document.body.appendChild(bgObj); //创建子窗口 var winObj=document.createElement("div") winObj.setAttribute("id","winDiv"); winObj.setAttribute("align","center"); winObj.style.position = "absolute"; winObj.style.width = this.winWidth; winObj.style.height = this.winHeight; winObj.style.left = (bgObj.clientWidth-parseInt(winObj.style.width))/2+document.body.scrollLeft; winObj.style.top = (bgObj.clientHeight-parseInt(winObj.style.height))/2+document.body.scrollTop; winObj.style.background=this.backgroundColor; winObj.style.border="1px solid " + this.borderColor; winObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif"; winObj.style.textAlign = "center"; winObj.style.lineHeight ="25px"; winObj.style.zIndex = "10001"; document.body.appendChild(winObj); //创建子窗口标题栏 var winTitle=document.createElement("h4"); winTitle.setAttribute("id","winTitle"); winTitle.setAttribute("align","left"); winTitle.style.position="relative"; winTitle.style.height="18px"; winTitle.style.color="white"; winTitle.style.background=this.titleColor; //winTitle.style.border="1px solid " + this.borderColor; winTitle.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif"; winTitle.style.margin="0"; winTitle.style.padding="1px"; winTitle.style.cursor="pointer"; winTitle.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);"; winTitle.style.opacity="0.75"; winTitle.innerHTML=this.titleMsg; winTitle.onmousedown=function(evt){ evt=evt || window.event; //var x=evt.layerX; //var y=evt.layerY; var x=evt.clientX; var y=evt.clientY; var dx=x-evt.offsetX; var dy=y-evt.offsetY; winObj.onmousemove=function(evt){ if(!evt) evt=window.event; var tx=evt.clientX-x; var ty=evt.clientY-y; winObj.style.left=dx+tx+document.body.scrollLeft; winObj.style.top=dy+ty+document.body.scrollTop; }; winObj.onmouseup=function(){ winObj.onmousemove=null; winObj.onmouseup=null; }; }; document.getElementById("winDiv").appendChild(winTitle); //创建子窗口标题栏上的关闭按钮 var closeBtn=document.createElement("label"); closeBtn.setAttribute("id","closeBtn"); closeBtn.style.position = "absolute"; closeBtn.style.right="4px"; closeBtn.style.top="-4px"; closeBtn.style.fontSize="17px"; closeBtn.innerHTML="x"; closeBtn.onclick=function(){ subwin.hide(); } document.getElementById("winTitle").appendChild(closeBtn); //创建子窗口内容 var winContent=document.createElement("div"); winContent.setAttribute("id","winContent"); winContent.style.margin="1em 0" winContent.innerHTML=this.content; document.getElementById("winDiv").appendChild(winContent); //优化子窗口的模态性 document.onmousemove=function(evt){ evt = evt || window.event; var target=evt.target || evt.srcElement; var winObj=document.getElementById("winDiv"); var node=target; winObj.$isInner=false; while(node){ if(node==winObj){ winObj.$isInner=true; break; } node=node.parentNode; } if(winObj.$isInner){ winObj.releaseCapture(); }else{ winObj.setCapture(); } } winObj.setCapture(); winObj.focus(); } //隐藏子窗口 SubWindow.prototype.hide=function(){ var bgObj=document.getElementById("bgDiv"); var winObj=document.getElementById("winDiv"); winObj.onfocusin=null; document.onmousemove=null; winObj.releaseCapture(); document.body.removeChild(bgObj); document.body.removeChild(winObj); }

 

测试页面:

 <html> <head> <mce:script src="SubWindow.js" mce_src="SubWindow.js"></mce:script> <mce:script type="text/javascript"><!-- function openPwdWin(evt){ var str="/ <div align='center'>/ <span style="font-size:13px" mce_style="font-size:13px">请输入密码: </span>/ <span><input type='password' name='pwd' /></span>/ <input id='confirm' type='button' value='确认' onclick='confirmPwd(pwd.value);'/>/ </div>/ "; document.body.onkeydown=function(evt){ evt = evt || window.event; var confirmBtn=document.getElementById("confirm"); if(evt.keyCode==13&&confirmBtn){ confirmBtn.click(); } } var subwin=new SubWindow("密码确认",str,300,80); document.body.$subwin=subwin; subwin.show(); } function confirmPwd(pwd){ var subwin=document.body.$subwin; if(pwd&&"123"==pwd){ alert("验证通过!"); }else{ alert("密码错误!"); } } // --></mce:script> </head> <body style="margin:0;padding:0;overflow:auto;" mce_style="margin:0;padding:0;overflow:auto;"> <input type='button' value='登陆' onclick='openPwdWin()'/> </body> </html>