javascriptポップアップ層が中央にあり、jsのWindow size and scrolling
3196 ワード
一つの文章の助けが大きいです.
http://www.howtocreate.co.uk/tutorials/javascript/browserwindowこの文章は現在のブラウザの幅を取る方法を紹介しています.また、現在のブラウザのscrollオフセットのxy値もあります.そうすると、私達は一つの階をページの中間に配置することができます.
ウィンドウの幅の長いコード
function show Dialog(did){
?G(「blankiframe」).style.display=「block」
??G(「bmask」).style.display=「block」
?var el=G(did)
??l.style.display=「block」
??var innexy=get InnerXY()
???/add the offset
??var ofxy=get ScrrollXY();
??if(js.util.browser.msie){/ie
??????el.style.top=(innexy[1]-el.clientHeight)/2+offxy[1]+px;
??????el.style.left=(innexy[0]-el.clientWidth)/2+offxy[0]+px;
??}else{
??????el.style.top=((innexy[1]-el.clientHeight)/2)+「px」
???????el.style.left=(innexy[0]-el.clientWidth)/2)+「px」
??? }
???
//??el.style.margin Top=-(el.clientHeight/2)+「px」
//??el.style.margingLeft=「-240 px」
)
js.util.browserのコードを追加します.
var userAgent=navigator.userAgent.torowerCase();
//Figure out what browser is being used
js.util.browser={
??version:(user Agent.match(/.+(?:rv|it𞓜ラie)/(\//)/)𞓜𞓜|[1],
??safari:/webkit/.test(userAgent)&!/chrome/.test(userAgent)
??chrome:/chrome/.test(userAgent)
??opera:/opera/test、
??msie:/msie/.test&&!/opera/.test、
???mozila:/mozela/test&&!//.test
}
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 show Dialog(did){
?G(「blankiframe」).style.display=「block」
??G(「bmask」).style.display=「block」
?var el=G(did)
??l.style.display=「block」
??var innexy=get InnerXY()
???/add the offset
??var ofxy=get ScrrollXY();
??if(js.util.browser.msie){/ie
??????el.style.top=(innexy[1]-el.clientHeight)/2+offxy[1]+px;
??????el.style.left=(innexy[0]-el.clientWidth)/2+offxy[0]+px;
??}else{
??????el.style.top=((innexy[1]-el.clientHeight)/2)+「px」
???????el.style.left=(innexy[0]-el.clientWidth)/2)+「px」
??? }
???
//??el.style.margin Top=-(el.clientHeight/2)+「px」
//??el.style.margingLeft=「-240 px」
)
js.util.browserのコードを追加します.
var userAgent=navigator.userAgent.torowerCase();
//Figure out what browser is being used
js.util.browser={
??version:(user Agent.match(/.+(?:rv|it𞓜ラie)/(\//)/)𞓜𞓜|[1],
??safari:/webkit/.test(userAgent)&!/chrome/.test(userAgent)
??chrome:/chrome/.test(userAgent)
??opera:/opera/test、
??msie:/msie/.test&&!/opera/.test、
???mozila:/mozela/test&&!//.test
}