HTML要素の高さを取得するjQuery

Question

私は自分のアプリケーション用のすてきなモーダルメッセージウィンドウを作成しましたが、オーバーレイに注入されているコンテナの高さを見つけることができません。

function load_shipping_message (title, message) { 
    var left = (($(window).width()/2) - 300) + 'px'; 
    var height = $(document).height(); 
    var overlay = $('<div id="overlay" style="display:none;height:'+height+'px;"></div>').appendTo($('body')); 
    var atc = $('<div class="atc-container" style="width:600px;"></div>').appendTo($('#overlay')); 
    var mess = $('<div class="atc-msg"><div class="success">'+title+'</div><p>'+message+'</p><p class="clearfix"><a class="button" style="float:right;"><span>Close</span></p></div>'); 
    atc.html(mess); 
    var top = (($(window).height()/2) - (atc.height()/2)) + 'px'; 
    atc.css ({ 
     'top': top, 
     'left': left 
    }); 
    overlay.fadeIn('slow', function() { 
     overlay.click (function() { 
     overlay.fadeOut ('slow', function() { 
      overlay.remove(); 
     });  
     }); 
    }); 
} 

上記のatc.height（）の値は、コンテンツが含まれていても常に0を返します。

これ以外の機能は、atc.height（）が常にゼロであるため、メッセージボックスの上部をビューポートの中間点に設定するだけです。ちょうどそれを適切に中心に置いておきたい場合、ボックスの高さは内容の長さによって明らかに異なります。

おそらくオーバーレイが隠されているためですか？

ありがとうございました。

Answer 1

-Vinceはい、それは親が、それは、表示マージントップのユーザーのうち、オーバーレイを動かし0トライが表示されます隠されていた場合：-10000pxまたはそのので代わりに表示なしの似たような、DOMユーザーがそれを見ることができなくても、それをレンダリングしています。

Answer 2

要素にdisplay:noneがある場合、要素とすべての子孫の高さ（および幅）はゼロになります。

はこれを修正するには、のような何かを：

set display to block 
get height 
set display back to none 

JSブロックのページの再描画するので、ユーザーは高さが測定されている間、要素が示されている見ることを得ることはありません。