js 让窗口居中-阿里云开发者社区

js 让窗口居中

2016-05-10 1427

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

直接上代码

   Js代码  
    
  
$(function() {  
  
  
    function center_pos(){    
        var width = $('.dialog').width();  
        var height = $('.dialog').height();  
  
        var top = (getInner().height - height) / 2 + getScroll().top;  
        var left = (getInner().width - width) / 2 +getScroll().left;  
  
        $('.dialog').css({  
            'top': top,  
            'left': left  
        });  
    }  
  
    $(window).bind('load',center_pos);  
    $(window).bind('resize',center_pos);  
  
      
});  

封装之后:

   Js代码  
    
  
/*** 
 * make dialog in center 
 */  
com.whuang.hsj.centerJQueryPos = function ($div22, isApplyVertical) {  
    var width = $div22.width();  
    var height = $div22.height();  
  
    var top = (getInner().height - height) / 2 + com.whuang.hsj.getScroll().top;  
    var left = (getInner().width - width) / 2 + com.whuang.hsj.getScroll().left;  
    var param = {'left': left};  
    if (arguments.length === 1 || isApplyVertical) {//Vertical direction  
        param['top'] = top;  
    }  
    $div22.css(param);  
};//centerJQueryPos  

依赖的js方法:

   Js代码  
    
  
//Cross browser gets the size of Visual area window,Have nothing to do with scroll bars  
var getInner=(function() {  
    // alert(typeof window.innerWidth !== 'undefined');  
    if (typeof window.innerWidth !== 'undefined') {//Notice:'undefined' is right  
        return function(){  
            return {  
                width : window.innerWidth,  
                height : window.innerHeight  
            }  
        }  
    } else {  
        return function(){  
            return {  
                width : document.documentElement.clientWidth,  
                height : document.documentElement.clientHeight  
            }  
        }  
    }  
})();  
//Cross browser gets the position of scroll  
com.whuang.hsj.getScroll=function(){  
    return {  
        top:document.documentElement.scrollTop || document.body.scrollTop,  
        left:document.documentElement.scrollLeft || document.body.scrollLeft,  
        height:document.documentElement.scrollHeight ||document.body.scrollHeight  
    };  
};  

js 让窗口居中

热门文章

最新文章

相关课程

相关电子书

相关实验场景