js弹出框、遮罩层、可拖动学习-阿里云开发者社区

解决弹出层定位滚动条scrollTop不兼容问题，即弹出层后滚动条不允许回到最上面，而是停在当前可见区域。
document.documentElement.scrollTop在ie中有值，但其他浏览器都为0；
document.body.scrollTop在ie中为0，其他浏览器都有值。
特别注意：不要这样调用<a href="#" onclick="openLoginBox()"></a>
应该：<a style="cursor:pointer" onclick="openLoginBox()">点击登录</a>

   
   

    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

    
    <html xmlns="http://www.w3.org/1999/xhtml">  

    
    <head>  

    
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />  

    
    <title>兼容性好的Js弹出框，完美拖拽</title>  

    
    <style>  

    
    <!--  

    
    body{  

    
        margin:0px;  

    
        padding:0px;  

    
    }  

    
    -->  

    
    </style>  

    
    </head>  

    
      

    
    <body> 

    
    <!-- <a href="#" onclick="openLoginBox()">点击登录</a>      //错误调用写法，不能写href="#" 画蛇添足，如果这样写，当点击的时候谷歌浏览器和遨游浏览器的滚动条会回到顶部，但是弹出层还在下面你刚刚浏览的区域中央--> 

    
    <a style="cursor:pointer" onclick="openLoginBox()">点击登录</a>  

    
    <input type="button" onclick="openLoginBox()" value="登  录"  />  

    
    <div style="height:1200px;width:900px;background:#360"></div>  

    
    <input type="button" onclick="openLoginBox()" value="登  录"  />  

    
      

    
    <script type="text/javascript">  

    
    <!--  

    
    var openLoginBox=function(){                                                //调用  

    
        var cover=document.createElement('div');  

    
        cover.setAttribute('id','cover');  

    
        cover.style.width='100%';  

    
        cover.style.height=document.documentElement.scrollHeight+'px';  

    
        cover.style.background='#eee';  

    
        cover.style.position='absolute';  

    
        cover.style.left='0';  

    
        cover.style.top='0';  

    
        //cover.style.zIndex='99';                                              //设置元素的堆叠顺序，仅能在定位元素上奏效（例如 position:absolute;），该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。  

    
        cover.style.opacity=0.7;                                                //设置一个元素的透明度（ie6不支持），不可为负值。默认值为1不透明，0完全透明，精确度可以达到0.01  

    
        cover.style.filter='alpha(opacity=70)';                                 //ie6特别处理，  Opacity代表透明度等级，100不透明，0完全透明                           

    
        document.body.appendChild(cover);                                       //【输出遮罩层】  

    
          

    
        var loginBox=document.createElement('div');  

    
        loginBox.setAttribute('id','loginBox');  

    
        loginBox.style.width='400px';  

    
        loginBox.style.height='250px';  

    
        loginBox.style.border='3px solid #f00';  

    
        loginBox.style.overflow='hidden';                                       //溢出就隐藏，不产生滚动条  

    
        loginBox.style.borderRadius='10px';                                     //弹出的div边框圆角  

    
        loginBox.style.boxShadow='0 0 19px #666666';                            //弹出的div阴影  

    
        loginBox.style.position='absolute';  

    
        loginBox.style.left='50%';  

    
        loginBox.style.marginLeft='-200px';                                     //因为整个弹出的div宽400px，为了居中取一半  

    
        var scrolltopvalue;                                                     //浏览器滚动条离顶部距离（高度）  

    
        //alert(document.documentElement.scrollTop);                                    //ie有值  

    
        //alert(document.body.scrollTop);                                               //除了ie之外的浏览器有值  

    
        scrolltopvalue = document.documentElement.scrollTop + document.body.scrollTop;  //解决浏览器兼容问题，不同浏览器这两个值总会有一个恒为0，所以不用担心会对真正的scrollTop造成影响。一点小技巧，但很实用。  

    
        var clientheightvalue;                                                    

    
        clientheightvalue = document.documentElement.clientHeight;              //打开网页可见区域高  

    
        loginBox.style.top = scrolltopvalue + (clientheightvalue - 250)/2 + 'px';  

    
        //loginBox.style.top=document.documentElement.scrollTop+(document.documentElement.clientHeight-250)/2+'px';  

    
        document.body.appendChild(loginBox);                                    //【输出弹出框】  

    
          

    
        var loginBoxHandle=document.createElement('h1');  

    
        loginBoxHandle.setAttribute('id','loginBoxHandle');  

    
        loginBoxHandle.style.fontSize='14px';  

    
        loginBoxHandle.style.color='#c00';  

    
        loginBoxHandle.style.background='#f7dcdc';  

    
        loginBoxHandle.style.textAlign='left';  

    
        loginBoxHandle.style.padding='8px 15px';  

    
        loginBoxHandle.style.margin='0';  

    
        loginBoxHandle.innerHTML='用户登录<span onclick="closeLoginBox()" title="关闭" style="position:absolute; cursor:pointer; font-size:14px;right:8px; top:8px">×</span>';  

    
        loginBox.appendChild(loginBoxHandle);                                   //【弹出层内容】  

    
          

    
        var iframe=document.createElement('iframe');  

    
        iframe.setAttribute('src','http://www.baidu.com');  

    
        iframe.setAttribute('frameborder','0');  

    
        iframe.setAttribute('scrolling','no');  

    
        iframe.setAttribute('width',400);  

    
        iframe.setAttribute('height',250);  

    
        loginBox.appendChild(iframe);  

    
        new dragDrop({  

    
            target:document.getElementById('loginBox'),  

    
            bridge:document.getElementById('loginBoxHandle')  

    
        });   

    
    }  

    
      

    
    var closeLoginBox=function(){                                               //【关闭弹出层】  

    
        var loginBox=document.getElementById('loginBox');  

    
        var cover=document.getElementById('cover');   

    
        document.body.removeChild(loginBox);  

    
        document.body.removeChild(cover);  

    
    }  

    
      

    
    /***************************************结束 弹出层处理（下面是拖动处理）***********************************************/  

    
      

    
    /* new Dragdrop({ 

    
     *         target      拖拽元素 HTMLElemnt 必选 

    
     *         bridge     指定鼠标按下哪个元素时开始拖拽，实现模态对话框时用到  

    
     *         dragX      true/false false水平方向不可拖拽 (true)默认 

    
     *         dragY     true/false false垂直方向不可拖拽 (true)默认 

    
     *         area      [minX,maxX,minY,maxY] 指定拖拽范围 默认任意拖动 

    
     *         callback 移动过程中的回调函数 

    
     * }); 

    
    */ 

    
    Array.prototype.max = function() { 

    
        return Math.max.apply({},this) 

    
    } 

    
    Array.prototype.min = function() { 

    
        return Math.min.apply({},this) 

    
    } 

    
    var getByClass=function(searchClass){ 

    
            var tags = document.getElementsByTagName('*'); 

    
                var el = new Array(); 

    
            for(var i=0;i<tags.length;i++){ 

    
                if(tags[i].className==searchClass){ 

    
                    el.push(tags[i]) 

    
                    }; 

    
                } 

    
                return el 

    
        } 

    
    function dragDrop(option){ 

    
        this.target=option.target; 

    
        this.dragX=option.dragX!=false; 

    
        this.dragY=option.dragY!=false; 

    
        this.disX=0; 

    
        this.disY=0; 

    
        this.bridge =option.bridge; 

    
        this.area=option.area; 

    
        this.callback=option.callback; 

    
        this.target.style.zIndex='0'; 

    
        var _this=this; 

    
             this.bridge && (this.bridge.onmouseover=function(){ _this.bridge.style.cursor='move'}); 

    
         this.bridge?this.bridge.onmousedown=function(e){ _this.mousedown(e)}:this.target.onmousedown=function(e){ _this.mousedown(e)} 

    
             } 

    
        dragDrop.prototype={ 

    
            mousedown:function(e){ 

    
                var ee=e||event; 

    
                            var _this=this;     

    
                 this.disX=e.clientX-this.target.offsetLeft; 

    
                 this.disY=e.clientY-this.target.offsetTop; 

    
                this.target.style.cursor = 'move'; 

    
                

    
                 if(window.captureEvents){  

    
                 e.stopPropagation(); 

    
              e.preventDefault();} 

    
                  else{ 

    
                    e.cancelBubble = true; 

    
                    } 

    
                if(this.target.setCapture){ 

    
                    this.target.onmousemove=function(e){_this.move(e)} 

    
                    this.target.onmouseup=function(e){_this.mouseup(e)} 

    
                    this.target.setCapture() 

    
                    } 

    
                    else{ 

    
                document.onmousemove=function(e){_this.move(e)} 

    
                document.onmouseup=function(e){_this.mouseup(e)} 

    
                    } 

    
                        }, 

    
        move:function(e){ 

    
         this.target.style.margin=0; 

    
                    var ee=e||event; 

    
                    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; 

    
                    var moveX=e.clientX-this.disX; 

    
                    var moveY=e.clientY-this.disY; 

    
                    if(this.area){ 

    
                    moveX < _this.area[0] && (moveX = this.area[0]); // left 最小值 

    
                    moveX > _this.area[1] && (moveX = this.area[1]); // left 最大值 

    
                    moveY < _this.area[2] && (moveY = this.area[2]); // top 最小值 

    
                    moveY > _this.area[3] && (moveY = this.area[3]); // top 最大值                     

    
                        } 

    
                         

    
                    this.dragX && (this.target.style.left=moveX+'px'); 

    
                    this.dragY && (this.target.style.top=moveY+'px'); 

    
                    //限定范围 

    
                     parseInt(this.target.style.top)<0 && (this.target.style.top=0); 

    
                     parseInt(this.target.style.left)<0 && (this.target.style.left=0); 

    
                     parseInt(this.target.style.left)>document.documentElement.clientWidth-this.target.offsetWidth&&(this.target.style.left=document.documentElement.clientWidth-this.target.offsetWidth+"px"); 

    
                     parseInt(this.target.style.top)>scrollTop+document.documentElement.clientHeight-this.target.offsetHeight && (this.target.style.top=scrollTop+document.documentElement.clientHeight-this.target.offsetHeight+'px'); 

    
                    if(this.callback){ 

    
                        var obj = {moveX:moveX,moveY:moveY}; 

    
                        this.callback.call(this,obj) 

    
                        } 

    
                return false 

    
                }, 

    
         mouseup:function (e) 

    
                { 

    
                 var ee=e||event; 

    
                 this.target.style.cursor = 'default'; 

    
                 var _this=this; 

    
                  this.target.onmousemove=null; 

    
                  this.target.onmouseup=null; 

    
                document.onmousemove=null; 

    
                document.onmouseup=null; 

    
                if(this.target.releaseCapture) {this.target.releaseCapture()} 

    
                }     

    
            } 

    
    //-->  

    
    </script>  

    
    </body>  

    
    </html>
本文转自许琴 51CTO博客，原文链接：http://blog.51cto.com/xuqin/984397，如需转载请自行联系原作者
js弹出框、遮罩层、可拖动学习

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件
