HTML overlay height to cover entire visible page
- by Evgeny
I have a web page that loads some stuff using AJAX. I want to display an overlay with a loading indicator while the loading is in progress, so that the user cannot interact with most of the page - except the menu at the top. I'm using jQuery and the jQuery BlockUI plugin to do this.
I call $(element).block() and it works fine, but the overlay only extends as far down as the current content of my page. As more content is loaded and added to the page the overlay moves down with it and this looks a bit ugly. Ideally I'd like it to cover the entire visible area of the page right from the start. A simple hack for doing this would be to set a large height value for the overlay, like this:
$(myElement).block({
overlayCSS: {
height: '10000px'
}
});
... but this creates a scrollbar! How do I avoid this and make it just the right height to cover the visible page, but not enlarge it?
