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