jquery - 获取 HTML 元素的高度 jQuery

Question

我为我的应用程序创建了一个漂亮的小模态消息窗口，但我似乎找不到注入(inject)到叠加层中的容器的高度。

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，即使它包含内容。

除此之外它工作得很好，它只是将消息框的顶部设置为视口(viewport)的中点，因为 atc.height() 始终为零。只是想让它正确居中，盒子的高度根据内容的长度明显不同。

也许是因为叠加层被隐藏了？

谢谢。

-文斯

Answer 1

是的，如果它的父级被隐藏，它将显示 0。尝试将覆盖层移出用户 View ，margin-top: -10000px 或类似的东西而不是不显示，以便 DOM 仍然渲染它，即使用户看不到它。