js div模拟模态窗口，解决了div与select的遮挡问题

div模拟模态窗口的代码转自 【水手ID：shuishou119800】的【一个自定义模态窗口的js类(用div实现)】：
模态窗口js：（SubWindow.js）

function SubWindow(titleMsg,content,winWidth,winHeight,borderColor,titleColor,backgroundColor){ this.titleMsg=titleMsg; //标题信息 this.content=content; //窗体内容 this.winWidth=winWidth||"400px"; //提示窗口的宽度 this.winHeight=winHeight||"400px"; //提示窗口的高度 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.οnmοusedοwn=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.οnmοusemοve=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.οnmοuseup=function(){ winObj.οnmοusemοve=null; winObj.οnmοuseup=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.οnclick=function(){ subwin.hide(); } document.οnkeydοwn=function(){ if(window.event.keyCode == 27){ // Esc 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.οnmοusemοve=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.οnfοcusin=null; document.οnmοusemοve=null; winObj.releaseCapture(); document.body.removeChild(bgObj); document.body.removeChild(winObj); }

测试页面代码：（test.html）

<html> <head> <mce:script src="SubWindow.js" mce_src="SubWindow.js" src="SubWindow.js" mce_src="SubWindow.js"></mce:script> <mce:script type="text/javascript"><!-- function openWin(){ var content = ""; content += "<iframe src="/" mce_src="/""javascript:false/" style="/" mce_style="/""position:absolute; visibility:inherit; top:0px; left:0px; width:100%; height:100%; z-index:-1; filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';/"></iframe>"; content += "<input type=/"text/" id=/"textTst/" value=/"sdfd/" />"; content += "<input type=/"button/" value=/"登陆/" οnclick=/"showValue();closeBtn.onclick();/"/>"; var subwin=new SubWindow("密码确认",content,300,80); document.body.$subwin=subwin; subwin.show(); } function showValue(){ alert(document.getElementById("textTst").value); } // --></mce:script> </head> <body > <select> <option value="1">option1</option> <option value="2">option2</option> <option value="3">option3</option> <option value="4">option4</option> <option value="5">option5</option> </select> <input type='button' value='测试' οnclick='openWin()'/> </body> </html>