jQueryのプラグインfancyBoxには、とてもお世話になっています。
使用するファイルがすごく多いけど、簡単設置でカスタマイズも結構自由でクールなウインドウが作られる。
しかもレスポンシブ対応。
でも今回ちょっと今回ハマったところがあったのでメモ。
あらゆる画面サイズに対応しているため、どうやら開き先のhtmlの内容からページの高さを算出している模様。
通常のhtmlなら問題ないかもしれないが、cssでレイアウトを作った際に気を付けないとエラーを起こすよう。
私の場合、開き先ページに、横並びのdiv要素を作っていた。
float:leftとして、それを親divで囲い、3列にならべる形。
そのままだと、ページの高さを算出できないようようで、最小のページの高さで表示されてしまった。
で、結局は、
親divにdisplay:table
子divにdisplay:table-cell
を設定したことで解決。
一塊のdivとして、やっと認めてくれたようで何とか正常に動作。
うーん。正式にはdisplay:tableってするものなのか？きちんと調べる必要あり。