Question

I’ve created a nice little modal message window for my app but I can’t seem to find the height of the container thats being injected into the overlay.

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();   
         });    
      });
   });
}

In the above the value of atc.height() always returns 0 even though it contains content.

It works perfectly other than this, it simply sets the top of the message box to the halfway point of the viewport since atc.height() is always zero. Just want to center it properly, the height of the box differs obviously depending on the length of the content.

Perhaps because the overlay is hidden?

Thanks.

-Vince

Answer 1

Yes, if it’s parent is hidden it will show 0. Try moving the overlay out of the users view, margin-top: -10000px or something similar instead of display none, so that the DOM is still rendering it, even though the user can’t see it.