こんにちは,
ダイアログの表示
ウェブアプリでよく使われるインタフェースとして,
なお,
さて,
まずはCSSだけで処理するアプローチを見ていきましょう。表示する要素のサイズが固定で,
CSSで画面中央に配置
.outer{
position:fixed;
top:50%;
left:50%;
}
.inner{
position:relative;
top:-250px;
left:-250px;
width:500px;
height:500px;
background:#ccc;
}
入れ子になった要素を用意して,
IE 6はposition:fixedに対応していないため,
IE 6用にスクロール位置で調整
if (!window.XMLHttpRequest && window.ActiveXObject){
div.style.position = 'absolute';
var root = document.documentElement;
window.attachEvent('onscroll', function(evt){
div.style.top = root.scrollTop + root.clientHeight / 2 + 'px';
});
}
IE 6かどうかの判定はXMLHttpRequestが存在するかどうかで判定します
IE 6のときはpositionをabsoluteにして,
これで一応はIE 6でもposition:fixed相当が実現できました。しかし,
スクロール時のちらつきをなくすには,
expressionによる位置指定
.IE6POSITION_FIXED{
behavior:expression(
this.style.top = document.documentElement.scrollTop +
document.documentElement.clientHeight / 2
);
}
behavior:expressionの中はJavaScriptとして解釈されてCSSの描画に合わせて実行されます。描画のたびにJavaScriptが実行されるので,
このCSSがIE 6だけに適用されるように,
IE 6用の処理
if (!window.XMLHttpRequest && window.ActiveXObject){
div.style.position = 'absolute';
div.className += ' IE6POSITION_FIXED';
document.body.style.backgroundImage = 'url(about:blank)';
document.body.style.backgroundAttachment = 'fixed';
}
これでIE 6でもスムーズなposition:fixedが実現できました。しかし,