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);

	
});

 封装之后:

/***
 * 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方法:

//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居中,窗口处于正中,窗口居中,对话框居中)