Lightbox風 モーダルウィンドウをつくっている中でのメモ。
◆CSS
★opacityに対応していないIE向けにはfilterプロパティも並記。
例）opacity: 0.60;
filter: alpha(opacity=60);
★IEはposition: fixed;に対応していないので、スターハックでposition: abusolute;に。
例）*html #glayLayer {
position: abusolute;
}
◆JavaScript
★上記の『position: abusolute;』を『position: fixed;』へ擬似的に実現する処理をさせる為、IE6のみに下のように記述。
例）if($.browser.msie && $.browser.version<7){
$(window).scroll(function(){
$("#glayLayer").css('top',$(document).scrollTop());
$("#overLayer").css('top',($(document).scrollTop()+$(window).height()/2) +"px");
});
}
☆解説
$(window).scroll(function(){
ブラウザー上でのスクロール処理（スクロールイベント）を感知し、｛．．．｝内に記述された
命令を実行する構文。
scrollTop()
現在のスクロール位置を取得する命令。セレクターに$(document)と指定すると
Webページ先頭からの位置を得られる。
height()
要素の高さを取得する命令。セレクターに$(window)と指定するとブラウザーの表示領域の高さを得られる。
★上記の記述でチラツキが生じる場合は、IE独自の『setExpression』という命令で問題を回避。
この命令はIE5〜7のみに効果あり。
例）if($.browser.msie && $.browser.version<7){
$(window).scroll(function(){
$("#glayLayer").get(0).style.setExpression("top","$(document).scrollTop()+'px'");
$("#overLayer").get(0).style.setExpression("top","($(document).scrollTop()+$(window).height()/2)+'px'");
});
}
get(0)
jQueryで取得した要素にJavaScriptで記述した処理を適用する命令
