HTML overlay to cover the entire visible page

Question

I have a webpage that loads some things using AJAX. I want to display an overlay with a progress bar during loading, so the user cannot interact with most of the page - except for the menu at the top. I am using jQuery and jQuery BlockUI plugin for this.

I call $ (element) .block () and it works fine, but the overlay only extends to the current contents of my page. As more content is loaded and added to the page, the overlay moves down and it looks a little ugly. Ideally, I would like it to cover the entire visible area of ​​the page from the very beginning. A simple hack for this would be to set a large height value for the overlay, for example:

$(myElement).block({ overlayCSS: { height: '10000px' } }); 

... but this creates a scrollbar! How can I avoid this and make it only the right height to cover the visible page but not enlarge it?

Answer 1

Use position: fixed; instead of position: absolute . This way the overlay does not move even if you scroll.

Answer 2

In XHTML, the html and body elements are not as magical as in HTML. The body element does not automatically fill the viewport (window), its size is only high, as its contents.

In order for the element to fill the window, you first need the html and body elements to fill the window:

 html, body { height: 100%; } 

Then you can use height: 100%; for an element in the body to cover the entire height.

Answer 3

Set position to absolute and height to 100%.

Answer 4

I made you a complete example, now you can use it in your application and just hide it after completing the ajax request.

Click here !

 <div class="overlay"></div> <div id="container"> content Whatever you want even you can delete this container <div> 

Answer 5

The following code worked for me:

 $("body").block({ message: '<h2>Loading...</h2>', overlayCSS: { position: 'absolute', top: '0', bottom: '0', left: '0', right: '0' } }); body { color: #004A6E; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } 

I used the following post as a link: Make a div at 100% of the height of the browser window one modification that I had to do was add left and right. My overlay covered only half the screen.

Answer 6

Worked for me! I changed absolute to fixed .

 function showWaitPopup() { var obj = document.getElementById('bkdiv'); if (obj) { obj.style.display = 'block'; } return true; } showWaitPopup(); 

 div.bkdiv { background-color: #000000; opacity: 0.6; filter: alpha(opacity=60); z-index: 2000; position: fixed; top: 0px; left: 0px; width: 100%; height: 200%; display: none; } 

 <div class="bkdiv" id="bkdiv"></div>