解决弹出层定位滚动条scrollTop不兼容问题,即弹出层后滚动条不允许回到最上面,而是停在当前可见区域。

document.documentElement.scrollTop在ie中有值,但其他浏览器都为0;

document.body.scrollTop在ie中为0,其他浏览器都有值。

特别注意:不要这样调用<a href="#" onclick="openLoginBox()"></a>

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

 


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=GBK" />  
  5. <title>兼容性好的Js弹出框,完美拖拽</title>  
  6. <style>  
  7. <!--  
  8. body{  
  9.     margin:0px;  
  10.     padding:0px;  
  11. }  
  12. -->  
  13. </style>  
  14. </head>  
  15.   
  16. <body> 
  17. <!-- <a href="#" onclick="openLoginBox()">点击登录</a>      //错误调用写法,不能写href="#" 画蛇添足,如果这样写,当点击的时候谷歌浏览器和遨游浏览器的滚动条会回到顶部,但是弹出层还在下面你刚刚浏览的区域中央--> 
  18. <a style="cursor:pointer" onclick="openLoginBox()">点击登录</a>  
  19. <input type="button" onclick="openLoginBox()" value="登  录"  />  
  20. <div style="height:1200px;width:900px;background:#360"></div>  
  21. <input type="button" onclick="openLoginBox()" value="登  录"  />  
  22.   
  23. <script type="text/javascript">  
  24. <!--  
  25. var openLoginBox=function(){                                                //调用  
  26.     var cover=document.createElement('div');  
  27.     cover.setAttribute('id','cover');  
  28.     cover.style.width='100%';  
  29.     cover.style.height=document.documentElement.scrollHeight+'px';  
  30.     cover.style.background='#eee';  
  31.     cover.style.position='absolute';  
  32.     cover.style.left='0';  
  33.     cover.style.top='0';  
  34.     //cover.style.zIndex='99';                                              //设置元素的堆叠顺序,仅能在定位元素上奏效(例如 position:absolute;),该属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远。  
  35.     cover.style.opacity=0.7;                                                //设置一个元素的透明度(ie6不支持),不可为负值。默认值为1不透明,0完全透明,精确度可以达到0.01  
  36.     cover.style.filter='alpha(opacity=70)';                                 //ie6特别处理,  Opacity代表透明度等级,100不透明,0完全透明                           
  37.     document.body.appendChild(cover);                                       //【输出遮罩层】  
  38.       
  39.     var loginBox=document.createElement('div');  
  40.     loginBox.setAttribute('id','loginBox');  
  41.     loginBox.style.width='400px';  
  42.     loginBox.style.height='250px';  
  43.     loginBox.style.border='3px solid #f00';  
  44.     loginBox.style.overflow='hidden';                                       //溢出就隐藏,不产生滚动条  
  45.     loginBox.style.borderRadius='10px';                                     //弹出的div边框圆角  
  46.     loginBox.style.boxShadow='0 0 19px #666666';                            //弹出的div阴影  
  47.     loginBox.style.position='absolute';  
  48.     loginBox.style.left='50%';  
  49.     loginBox.style.marginLeft='-200px';                                     //因为整个弹出的div宽400px,为了居中取一半  
  50.     var scrolltopvalue;                                                     //浏览器滚动条离顶部距离(高度)  
  51.     //alert(document.documentElement.scrollTop);                                    //ie有值  
  52.     //alert(document.body.scrollTop);                                               //除了ie之外的浏览器有值  
  53.     scrolltopvalue = document.documentElement.scrollTop + document.body.scrollTop;  //解决浏览器兼容问题,不同浏览器这两个值总会有一个恒为0,所以不用担心会对真正的scrollTop造成影响。一点小技巧,但很实用。  
  54.     var clientheightvalue;                                                    
  55.     clientheightvalue = document.documentElement.clientHeight;              //打开网页可见区域高  
  56.     loginBox.style.top = scrolltopvalue + (clientheightvalue - 250)/2 + 'px';  
  57.     //loginBox.style.top=document.documentElement.scrollTop+(document.documentElement.clientHeight-250)/2+'px';  
  58.     document.body.appendChild(loginBox);                                    //【输出弹出框】  
  59.       
  60.     var loginBoxHandle=document.createElement('h1');  
  61.     loginBoxHandle.setAttribute('id','loginBoxHandle');  
  62.     loginBoxHandle.style.fontSize='14px';  
  63.     loginBoxHandle.style.color='#c00';  
  64.     loginBoxHandle.style.background='#f7dcdc';  
  65.     loginBoxHandle.style.textAlign='left';  
  66.     loginBoxHandle.style.padding='8px 15px';  
  67.     loginBoxHandle.style.margin='0';  
  68.     loginBoxHandle.innerHTML='用户登录<span onclick="closeLoginBox()" title="关闭" style="position:absolute; cursor:pointer; font-size:14px;right:8px; top:8px">×</span>';  
  69.     loginBox.appendChild(loginBoxHandle);                                   //【弹出层内容】  
  70.       
  71.     var iframe=document.createElement('iframe');  
  72.     iframe.setAttribute('src','http://www.baidu.com');  
  73.     iframe.setAttribute('frameborder','0');  
  74.     iframe.setAttribute('scrolling','no');  
  75.     iframe.setAttribute('width',400);  
  76.     iframe.setAttribute('height',250);  
  77.     loginBox.appendChild(iframe);  
  78.     new dragDrop({  
  79.         target:document.getElementById('loginBox'),  
  80.         bridge:document.getElementById('loginBoxHandle')  
  81.     });   
  82. }  
  83.   
  84. var closeLoginBox=function(){                                               //【关闭弹出层】  
  85.     var loginBox=document.getElementById('loginBox');  
  86.     var cover=document.getElementById('cover');   
  87.     document.body.removeChild(loginBox);  
  88.     document.body.removeChild(cover);  
  89. }  
  90.   
  91. /***************************************结束 弹出层处理(下面是拖动处理)***********************************************/  
  92.   
  93. /* new Dragdrop({ 
  94.  *         target      拖拽元素 HTMLElemnt 必选 
  95.  *         bridge     指定鼠标按下哪个元素时开始拖拽,实现模态对话框时用到  
  96.  *         dragX      true/false false水平方向不可拖拽 (true)默认 
  97.  *         dragY     true/false false垂直方向不可拖拽 (true)默认 
  98.  *         area      [minX,maxX,minY,maxY] 指定拖拽范围 默认任意拖动 
  99.  *         callback 移动过程中的回调函数 
  100.  * }); 
  101. */ 
  102. Array.prototype.max = function() { 
  103.     return Math.max.apply({},this) 
  104. Array.prototype.min = function() { 
  105.     return Math.min.apply({},this) 
  106. var getByClass=function(searchClass){ 
  107.         var tags = document.getElementsByTagName('*'); 
  108.             var el = new Array(); 
  109.         for(var i=0;i<tags.length;i++){ 
  110.             if(tags[i].className==searchClass){ 
  111.                 el.push(tags[i]) 
  112.                 }; 
  113.             } 
  114.             return el 
  115.     } 
  116. function dragDrop(option){ 
  117.     this.target=option.target; 
  118.     this.dragX=option.dragX!=false; 
  119.     this.dragY=option.dragY!=false; 
  120.     this.disX=0
  121.     this.disY=0
  122.     this.bridge =option.bridge; 
  123.     this.area=option.area; 
  124.     this.callback=option.callback; 
  125.     this.target.style.zIndex='0'
  126.     var _this=this; 
  127.          this.bridge && (this.bridge.onmouseover=function(){ _this.bridge.style.cursor='move'}); 
  128.      this.bridge?this.bridge.onmousedown=function(e){ _this.mousedown(e)}:this.target.onmousedown=function(e){ _this.mousedown(e)} 
  129.          } 
  130.     dragDrop.prototype={ 
  131.         mousedown:function(e){ 
  132.             var ee=e||event; 
  133.                         var _this=this;     
  134.              this.disX=e.clientX-this.target.offsetLeft; 
  135.              this.disY=e.clientY-this.target.offsetTop; 
  136.             this.target.style.cursor = 'move'
  137.             
  138.              if(window.captureEvents){  
  139.              e.stopPropagation(); 
  140.           e.preventDefault();} 
  141.               else{ 
  142.                 e.cancelBubble = true
  143.                 } 
  144.             if(this.target.setCapture){ 
  145.                 this.target.onmousemove=function(e){_this.move(e)} 
  146.                 this.target.onmouseup=function(e){_this.mouseup(e)} 
  147.                 this.target.setCapture() 
  148.                 } 
  149.                 else{ 
  150.             document.onmousemove=function(e){_this.move(e)} 
  151.             document.onmouseup=function(e){_this.mouseup(e)} 
  152.                 } 
  153.                     }, 
  154.     move:function(e){ 
  155.      this.target.style.margin=0
  156.                 var ee=e||event; 
  157.                 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; 
  158.                 var moveX=e.clientX-this.disX; 
  159.                 var moveY=e.clientY-this.disY; 
  160.                 if(this.area){ 
  161.                 moveX < _this.area[0] && (moveX = this.area[0]); // left 最小值 
  162.                 moveX > _this.area[1] && (moveX = this.area[1]); // left 最大值 
  163.                 moveY < _this.area[2] && (moveY = this.area[2]); // top 最小值 
  164.                 moveY > _this.area[3] && (moveY = this.area[3]); // top 最大值                     
  165.                     } 
  166.                      
  167.                 this.dragX && (this.target.style.left=moveX+'px'); 
  168.                 this.dragY && (this.target.style.top=moveY+'px'); 
  169.                 //限定范围 
  170.                  parseInt(this.target.style.top)<0 && (this.target.style.top=0); 
  171.                  parseInt(this.target.style.left)<0 && (this.target.style.left=0); 
  172.                  parseInt(this.target.style.left)>document.documentElement.clientWidth-this.target.offsetWidth&&(this.target.style.left=document.documentElement.clientWidth-this.target.offsetWidth+"px"); 
  173.                  parseInt(this.target.style.top)>scrollTop+document.documentElement.clientHeight-this.target.offsetHeight && (this.target.style.top=scrollTop+document.documentElement.clientHeight-this.target.offsetHeight+'px'); 
  174.                 if(this.callback){ 
  175.                     var obj = {moveX:moveX,moveY:moveY}; 
  176.                     this.callback.call(this,obj) 
  177.                     } 
  178.             return false 
  179.             }, 
  180.      mouseup:function (e) 
  181.             { 
  182.              var ee=e||event; 
  183.              this.target.style.cursor = 'default'
  184.              var _this=this; 
  185.               this.target.onmousemove=null
  186.               this.target.onmouseup=null
  187.             document.onmousemove=null
  188.             document.onmouseup=null
  189.             if(this.target.releaseCapture) {this.target.releaseCapture()} 
  190.             }     
  191.         } 
  192. //-->  
  193. </script>  
  194. </body>  
  195. </html>