JavaScript实现弹出遮盖拖动层（不穿过浏览器边缘，兼容IE、FF）
JavaScript实现弹出遮盖拖动层（不穿过浏览器边缘，兼容IE、FF）
<style>#main {width:300px;heigth:200px;position:absolute;z-index:10;border:1px solid #d6d6d6;display:none;}#main .T {width:300px;height:auto;background:green;}#main .T .T_1 {float:left;width:282px;line-height:20px;cursor:move;color:#FFF;font-weight:bold;font-family:verdana;font-size:12px;}#main .T .T_2 {float:left;width:18px;line-height:20px;background:blue;color:#FFF;font-weight:bold;font-family:verdana;font-size:9pt;text-align:center;cursor:pointer;}#main .content {width:300px;height:200px;background:#fff; padding-top:50px;}</style><script type="text/javascript">function $(id){return document.getElementById(id);}function abc(){document.documentElement.scroll =true;$("main").style.display="inline";$("main").style.top = (document.body.clientHeight - $("main").offsetHeight)/2+"px";$("main").style.left = (document.body.clientWidth - $("main").offsetWidth)/2+"px";$("main").onmousedown=Function("Drag(this)"); //拖动层//背景层var shield=document.createElement("div");shield.id="shield";shield.style.cssText="position:absolute;z-index:1;background:#000;filter:alpha(opacity=30);opacity:0.3;top:0;left:0;";shield.style.width=document.body.scrollWidth+"px";var AH=document.body.scrollHeight;var BH=document.body.clientHeight;if(AH<BH){shield.style.height=BH+"px";}else{shield.style.height=AH+"px";}document.body.appendChild(shield);onresize=function(){ if(document.body.scrollHeight==document.body.clientHeight){ if(document.body.scrollHeight>document.body.clientHeight){ $("shield").style.height=document.body.clientHeight+"px"; }else{ $("shield").style.height=document.body.scrollHeight+"px"; } }else{ $("shield").style.height=document.body.scrollHeight+"px"; } $("shield").style.width=document.body.clientWidth+"px"; $("main").style.left= document.body.scrollLeft+(document.body.clientWidth-$("main").offsetWidth)/2+"px"; $("main").style.top= document.body.scrollTop+(document.body.clientHeight-$("main").offsetHeight)/2+"px";}onscroll=function(){$("main").style.top= document.body.scrollTop+(document.body.clientHeight-$("main").offsetHeight)/2+"px";}}function hidden(){if($("main")){$("main").style.display="none";}if($("shield")){document.body.removeChild($("shield"));}}function Drag(str){var e=window.event || arguments.callee.caller.arguments[0];var deltaX=e.clientX-str.offsetLeft;var deltaY=e.clientY-str.offsetTop;var deltaH=document.body.scrollHeight;var deltaW=document.body.scrollWidth;var drag=true;str.onmousemove=function(ev){ev=ev?ev:window.event;if(drag){ var Y=ev.clientY-deltaY; var X=ev.clientX-deltaX; var H=deltaH-str.offsetHeight; var W=deltaW-str.offsetWidth; if(Y>0 || X>0){ if(Y>=H){str.style.top=H+"px";}else{str.style.top=Y+"px";} if(X>=W){str.style.left=W+"px";}else{str.style.left=X+"px";} } if(Y<=0){str.style.top=0;} if(X<=0){str.style.left=0;} str.setCapture();}}str.onmouseup=function(){drag=false;str.releaseCapture();}}</script><button onclick="abc()">弹层</button><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><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><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div id="main"><div class="T"><div class="T_1" onmousedown="Drag(this.parentNode.parentNode)">鼠标放这里拖动</div><div class="T_2" onclick="hidden()">Χ</div></div><div class="content"> <table align="center"> <tr> <td>用户名：</td><td><input type="text" runat="server" id="userName" name="userName"/></td> </tr> <tr> <td>密码： </td><td><input type="text" runat="server" id="password" name="password"/></td> </tr> <tr> <td colspan=2 align="center"><input type="button" value="提交" onClick="check();" /></td> </tr> </table></div></div>