Lightbox風のモーダルウィンドウをjQueryで実現する際に、ハマったのでメモ。
モーダルウィンドウ内に表示するのはimgではなくHTML。
その中にfloatで横並びにした要素Aと要素Bを配置。
要素Aの高さを、要素Bの高さに合わせようとした。
基準となる要素Bの高さが、ユーザーPC環境や今後の更新等で変わる可能性があるため、Javascript（jQuery）で要素Bの高さを取得して、それを要素Aに適用する方法にしたのだが…
↓こんな感じ。
$(function(){
var heigth = $('要素Bのセレクタ').height();
$('要素Aのセレクタ').css('height', height);
});
モーダルウィンドウ内部のCSSやjQueryを設定していく段階では、当然ながら画面に表示されている状態で作業をするので、特に問題もなく狙い通りの表示。しかし、モーダルウィンドウですから、初期状態は非表示なわけです。なので、モーダルウィンドウのCSSの初期状態は「display:none;」。
これが問題だった。
display:noneの状態では、ロードされていないという理由なのか、高さや幅などの情報が取得できない。
↓heightの値は「０」です。
var heigth = $('要素Bのセレクタ').height();
console.log(height);
で、どうすりゃいいんでしょうねえ。別の方法を考えなくては。