`
80x86
  • 浏览: 106712 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

javascript弹出层居中,js的Window size and scrolling

阅读更多
有一个文章的帮助很大:
http://www.howtocreate.co.uk/tutorials/javascript/browserwindow这个文章介绍取得当前浏览器长宽的办法,还有当前浏览器的scroll偏移的xy值,这样,我们就可以定位一个层在页面中间了

窗口长宽的代码
function getInnerXY() {
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
return [myWidth, myHeight];
}

scroller偏移的代码
function getScrollXY() {
var scrOfX = 0, scrOfY = 0;
if( typeof( window.pageYOffset ) == 'number' ) {
//Netscape compliant
scrOfY = window.pageYOffset;
scrOfX = window.pageXOffset;
} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
//DOM compliant
scrOfY = document.body.scrollTop;
scrOfX = document.body.scrollLeft;
} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
//IE6 standards compliant mode
scrOfY = document.documentElement.scrollTop;
scrOfX = document.documentElement.scrollLeft;
}
return [ scrOfX, scrOfY ];
}

下面是让层居中,注意,ie的行为不一致,导致要单独判断是否加上偏移:
function showDialog (did) {
??? G("blankiframe").style.display = "block";
??? G("bmask").style.display="block";
??? var el = G(did);
??? el.style.display = "block";

??? var innerxy = getInnerXY();
??? // add the offset
??? var offxy = getScrollXY();
??? if (js.util.browser.msie) { // ie
??? ??? el.style.top = ((innerxy[1]-el.clientHeight)/2 + offxy[1])+"px";
??? ??? el.style.left = ((innerxy[0]-el.clientWidth)/2 + offxy[0])+"px";
??? } else {
??? ??? el.style.top = ((innerxy[1]-el.clientHeight)/2)+"px";
??????? el.style.left = ((innerxy[0]-el.clientWidth)/2)+"px";
??? }
???
//??? el.style.marginTop = -(el.clientHeight/2) + "px";
//??? el.style.marginLeft = "-240px";
}

加上一下js.util.browser的代码:
var userAgent = navigator.userAgent.toLowerCase();
// Figure out what browser is being used
js.util.browser = {
??? version: (userAgent.match(/.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/) || [])[1],
??? safari: /webkit/.test(userAgent) && !/chrome/.test(userAgent),
??? chrome: /chrome/.test(userAgent),
??? opera: /opera/.test(userAgent),
??? msie: /msie/.test(userAgent) && !/opera/.test(userAgent),
??? mozilla: /mozilla/.test(userAgent) && !/(compatible|webkit)/.test(userAgent)
};
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics