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>