jQueryでモーダルウインドウ、ie6の挙動

質問

お世話になっております。
javascript初心者です。

jQueryを使用してLightBox風のモーダルウインドウを制作したのですが、
ie6だと挙動がおかしくなります。
ie6でも正しい挙動させるにはどうすればいいでしょうか？

「変更」ボタンをウインドウに固定配置し、ボタンをクリックするとモーダルウインドウが表示非表示されるようにしています。

ie6ではcssのpositionプロパティのfixedに対応していないため、
ボタンとウインドウはscrollイベントとcssのabsoluteで擬似的に固定配置に見せています。

ページをロードし、最初に一回モーダルウインドウを開いたときは正常に動作をするのですが、
モーダルウインドウを閉じてもう一度、モーダルウインドを開くとウインドウの高さが相対値指定の80%にならないのと
画面が延々と下にスクロールできてしまいます。（ブラウザのサイズを変えたときは正常な表示に戻ります）

下記のアドレスにページをアップしています。
http://foofoo77.web.fc2.com/imagechange/light_animate4.html

ご回答、よろしくお願いいたします。

回答No.3

fujillin · ベストアンサー

#1、#2です。

＞ボタンを押してoverLayerを表示させた後にブラウザを縮めて
＞overLayerを少しでもブラウザの表示エリア外にすると～
ブラウザのリサイズ（サイズ変更）によるイベントがありますので、リサイズ時には、もう一度表示サイズの調整を行なうようにすればよろしいかと思いますが？
（c.f. onresize）

お礼

何度も目を通していただきありがとうございます。

そう言う処理で制作したいと思います。
参考になりました。

回答No.2

fujillin

#1です。

＞無限スクロール現象が起きてしまうようです。
＞これの回避方法がどうにも見つかりません。

ＩＥ6で、#1の方法でスクロールが起きないことを確認していますが…？

お礼

度々ご回答ありがとうございます。

教えて頂いたソースに書き換えたものを上げました↓
http://foofoo77.web.fc2.com/imagechange/light_animate4a.html

ちょっと言葉足らずだったようですみません。
ボタンを押してoverLayerを表示させた後にブラウザを縮めて
overLayerを少しでもブラウザの表示エリア外にするとスクロールが止まらない現象が発生してしまいます。
この現象を回避する方法はなさそうなのでposition指定をbottomからするしかないかなと思っています。

回答No.1

fujillin

回答がないみたいなので。

jqueryもExpressionもよくわかってないので、かなりいい加減ですが…

少しいじってみたところ、どうやらhide()にした時に要素がもとの高さに戻ってしまっているみたい。
次に表示するときにもレンダリングで再計算されないらしく、body全体の高さが高くなってしまうためにスクロールしっぱなしということのようですね。

最初からwindowを小さくしておいて表示させると、1回目は（多分）意図通りに表示されると思いますので、やっぱりhide()なのかなぁ？
とはいっても、1回目がOKということは、イニシャライズ時のhide()では悪影響が出ていないことになるので、イベント処理中のhide()のみ？（そんなこともなさそうですが…）

IEのバグなのかjqueryなのか、はたまたExpression（←多分これは関係なさそう）の影響なのかよくわかりませんが、とりあえず高さをスクリプトで再設定するようにしてあげれば、ご質問の現象は起こらなくなるみたいです。
（せっかくCSSで設定している意味がなくなっちゃいますけど）

　$("#switch").toggle(function(){
　　$("#glayLayer").show();
　　$("#overLayer").show();
の部分を

　$("#switch").toggle(function(){
　　$("#glayLayer").css("height", $(window).height()+"px").show();
　　$("#overLayer").css("height", ($(window).height()*4/5|0)+"px").show();
とすれば高さが反映されるようです。（←当たり前だけれど。　でも、%指定でしなおしてもダメみたい）

イベント処理のhide()の後で同様に指定しておく方法でもいけるみたいなので、なんとなくhide()とIEの相性が悪いのではという気がしますが、よくわかりません。

あんまり納得がいってませんけれど、まぁ、対処療法のひとつとして…

お礼

ご回答ありがとうございます。

返信遅くなりすみません。

教えて頂いた方法でウインドウの高さの算出はできました。

ie6でposition: abusolite指定で
scrollイベントで動的に座標を取得している要素はブラウザの下に出てしまうと無限スクロール現象が起きてしまうようです。
これの回避方法がどうにも見つかりません。

setExpressionはie独自の機能でブラウザが描画をするタイミングでイベントが起こるメソッドのようです。