js 让窗口居中

  1. 云栖社区>
  2. 博客列表>
  3. 正文

js 让窗口居中

黄威的世界 2016-05-10 16:16:05 浏览582 评论0

摘要: 直接上代码 Js代码   $(function() {             function center_pos(){             var width = $('.dialog').

直接上代码

Js代码  收藏代码
  1. $(function() {  
  2.   
  3.   
  4.     function center_pos(){    
  5.         var width = $('.dialog').width();  
  6.         var height = $('.dialog').height();  
  7.   
  8.         var top = (getInner().height - height) / 2 + getScroll().top;  
  9.         var left = (getInner().width - width) / 2 +getScroll().left;  
  10.   
  11.         $('.dialog').css({  
  12.             'top': top,  
  13.             'left': left  
  14.         });  
  15.     }  
  16.   
  17.     $(window).bind('load',center_pos);  
  18.     $(window).bind('resize',center_pos);  
  19.   
  20.       
  21. });  

 封装之后:

Js代码  收藏代码
  1. /*** 
  2.  * make dialog in center 
  3.  */  
  4. com.whuang.hsj.centerJQueryPos = function ($div22, isApplyVertical) {  
  5.     var width = $div22.width();  
  6.     var height = $div22.height();  
  7.   
  8.     var top = (getInner().height - height) / 2 + com.whuang.hsj.getScroll().top;  
  9.     var left = (getInner().width - width) / 2 + com.whuang.hsj.getScroll().left;  
  10.     var param = {'left': left};  
  11.     if (arguments.length === 1 || isApplyVertical) {//Vertical direction  
  12.         param['top'] = top;  
  13.     }  
  14.     $div22.css(param);  
  15. };//centerJQueryPos  

 

依赖的js方法:

Js代码  收藏代码
  1. //Cross browser gets the size of Visual area window,Have nothing to do with scroll bars  
  2. var getInner=(function() {  
  3.     // alert(typeof window.innerWidth !== 'undefined');  
  4.     if (typeof window.innerWidth !== 'undefined') {//Notice:'undefined' is right  
  5.         return function(){  
  6.             return {  
  7.                 width : window.innerWidth,  
  8.                 height : window.innerHeight  
  9.             }  
  10.         }  
  11.     } else {  
  12.         return function(){  
  13.             return {  
  14.                 width : document.documentElement.clientWidth,  
  15.                 height : document.documentElement.clientHeight  
  16.             }  
  17.         }  
  18.     }  
  19. })();  
  20. //Cross browser gets the position of scroll  
  21. com.whuang.hsj.getScroll=function(){  
  22.     return {  
  23.         top:document.documentElement.scrollTop || document.body.scrollTop,  
  24.         left:document.documentElement.scrollLeft || document.body.scrollLeft,  
  25.         height:document.documentElement.scrollHeight ||document.body.scrollHeight  
  26.     };  
  27. };  

 

【云栖快讯】阿里云栖开发者沙龙(Java技术专场)火热来袭!快来报名参与吧!  详情请点击

网友评论

黄威的世界
文章657篇 | 关注15
关注
Node.js 性能平台(Node.js Performance Platform)是面向中... 查看详情
全球领先的SaaS性能测试平台,具有强大的分布式压测能力,可模拟海量用户真实的业务场景,让应... 查看详情
共享带宽提供地域级带宽共享和复用功能,支持同地域下所有弹性公网IP共享带宽,进而让绑定弹性公... 查看详情
为您提供简单高效、处理能力可弹性伸缩的计算服务,帮助您快速构建更稳定、安全的应用,提升运维效... 查看详情
双12

双12