2

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

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() 始终为零。只是想正确居中，框的高度明显不同，具体取决于内容的长度。

也许是因为覆盖是隐藏的？

谢谢。

-文斯

4

2 回答 2

1

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

于 2012-04-19T19:50:44.703 回答
1

如果一个元素有display:none，它及其所有后代的高度（和宽度）将为零。

要解决此问题，请执行以下操作：

set display to block
get height
set display back to none

由于 JS 会阻止页面重绘，因此在测量高度时用户永远不会看到正在显示的元素。

于 2012-04-19T19:54:32.640 回答