弹出遮盖拖动层，不穿过浏览器边缘，兼容IE，FF

最新推荐文章于 2021-03-19 05:23:26 发布

wtqq520

最新推荐文章于 2021-03-19 05:23:26 发布

阅读量350

点赞数

本文链接：https://blog.csdn.net/wtqq520/article/details/42987103

版权

http://bbs.51js.com/thread-82234-1-1.html

<style>
#main {width:250px;heigth:300px;position:absolute;z-index:10;border:1px solid #d6d6d6;display:none;}
#main .T {width:250px;height:auto;background:green;}
#main .T .T_1 {float:left;width:232px;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:250px;height:100px;background:#fff;}
</style>
<script>
function $(id){return document.getElementById(id);}
function abc(){
        $("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").οnmοusedοwn=Function("Drag(this)"); //拖动层
        //背景层
        var shield=document.createElement("div");
        var W=document.body.clientWidth;
        var H=document.body.clientHeight;
        shield.id="shield";
        shield.style.cssText="position:absolute;z-index:1;width:"+W+"px;height:"+H+"px;background:#000;filter:alpha(opacity=30);opacity:0.3;top:0;left:0;";
        document.body.appendChild(shield);
}

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-parseInt(str.offsetLeft);
var deltaY=e.clientY-parseInt(str.offsetTop);
var deltaH=document.body.clientHeight;
var deltaW=document.body.clientWidth;
var drag=true;
str.οnmοusemοve=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.οnmοuseup=function(){drag=false;str.releaseCapture();}
}
</script>

<button οnclick="abc()">弹层</button>

<div id="main">
<div class="T"><div class="T_1" οnmοusedοwn="Drag(this.parentNode.parentNode)">鼠标放这里拖动</div><div class="T_2" οnclick="hidden()">Χ</div></div>
<div class="content"></div>
</div>