IE6でウィンドウ全体を覆うブロック要素を作る

CSS

Lightbox、Thickboxなどの背景の半透明の膜みたいなやつを自作する。


IE6以外はposition: fixedを使うことでできる。


まず、HTMLは以下のような感じ。

<body>
<div id="container">
    ...
    <div class="skin"></div>
</div>
</body>


CSSは、とりあえずIE6以外用に、以下のような感じ。

#container {
    position: relative;
    height: 100%; /* ウィンドウ全体を覆うように。 */
}

.skin {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    opacity: 0.5;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* for IE */
}


<div id="container">を包含ブロックにして、
その上に<div class="skin">をかぶせるような感じ。
包含ブロックはbody要素でもいいかもしれないが、未確認。


ページがロードされたときから膜を張っておく状況は想定し難いので、
Lightbox等を使う場合と同様、ボタンクリック等のアクションの後に表示、というように使うとすると、
JavaScriptで<div class="skin">を追加する。
関数の中身だけ書くと、

var container = document.getElementById("container");
var skin = document.createElement("div");
skin.className = "skin";
container.appendChild(skin);

とかいう感じ。


で、IE6はposition: fixedに対応していないので、
代わりにposition: absoluteを使う。


とりあえず、セレクタハックを使って、

 *html .skin {
    position: absolute;
}

を追加する。


これで一応、膜は張れるが、position: absoluteを使っているので、
ウィンドウサイズを変更というか、というか広げると、
膜の幅、高さが固定のままでウィンドウサイズについていかない。
あるいはスクロールバーが出ている状態だと、
ページをスクロールして隠れていた部分が表示されると、
その部分は膜に覆われない。


ウィンドウサイズについていくようにするために、
また、スクロールバーが出ているときに隠れている部分が、
ページのスクロールによって表示されたときに、その部分を覆うように、
JavaScriptを使ってウィンドウの幅と高さを取得し、
それをwidthとheightに適用する、
というのが考えられるが、
expressionという、CSSの中でJavaScriptを使えるようにする、
IE7までの独自拡張があるので、それを使うとてっとりばやい。
ただし、expressionはセキュリティ上問題があるようなので、
使う場合は注意する。


で、CSSは以下のような感じ。

 *html .skin {
    position: absolute;
    width: experssion(document.documentElement.scrollWidth);
    height: experssion(document.documentElement.scrollHeight);
}


膜に覆われる部分にドロップダウンがあったりすると、
膜の上に出てくるので注意。
IE6では、select要素にz-indexが効かないとか、
そんな話。