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>