直接上代码
$(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 }; };