Javascript overlay does not cover full page when div extends page height

Question

I understand that there have already been several such questions, but I think that my case is a little different.
I have a div that I absolutely position and float at the top of the page, and I set the caption behind it to blacken the rest of the page. I work fine until you scroll up and down.

The problem is that when a div appears, it is still populated with ajax data. Thus, the height and width of the bg overlay are already set, but as soon as all the data is loaded into a floating div, it sometimes pushes the page so that the height increases. Thus, I cannot calculate the height and width of the window or the document because the floating div is not yet fully loaded, and as soon as it does, it pushes the screen even further, as a result of which the bg overlay will not cover the entire page.

So, for example, in the code it looks something like this:

loadBoxContent = function(){ ..DO AJAX HERE.. ..PUT CONTENT INTO FLOATING DIV.. $('#floatDiv').show() $('#darkOverlay').height($(window).height()); } 

I checked this by adding a warning, so that by the time I clicked on the warning, bg overlay could calculate the true page size, and that looks fine. Sorry if this sounds confusing, but I hope you get what I'm trying to achieve. I guess this is not too complicated, but I could not figure it out. Any help would be appreciated, I am using jquery.

thanks

Answer 1

Overlay;)

** update, setting the position of all corners to 0 instead of using the width / height of 100% **

 $("<div/>") .css({ position:"fixed", // ze trick background:"#000", opacity:.5, top:0, bottom: 0, left:0, right: 0, zIndex: 2999 // everything you want on top, gets higher z-index }) .appendTo("body"); 

Or put the above css settings in the css stylesheet (opacity requires cross browsers).

 $("#dark-overlay").show(); 

Answer 2

Here is the solution:

JQuery Show Download Plugin

Do not try to invent a wheel !!!

Here is a demo:

Download demo

Now you just need to create the main container for your page and just ask this simple plugin to do it for you.

Perhaps you want to read the source of the plugin and find how it works ...