Question

I am creating a modal window using jquery. I am having an issue with the page height when creating a overlay.

To set the overlay height I am using $(document).height() and this is working fine.
But if the page height increases as per the records the memory usage is doubled.

For Example if my page has 10 records and when I click on a link to open modal window the memory usage is changed from 68,000k to 75,000k.

If my page has 100 records, when I open modal window memory usage is 135,000k.

This is explicitly because of document height.

This is found in IE8.

Please help me out on how to get the document height without effecting the memory.

Answer 1

Rather than creating an overlay that covers the entire page, why not position the overlay using a fixed position relative to the viewport?

You could try the following CSS to achieve this:

#overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

This would avoid the requirement of continually increasing the height of the overlay and would cover the entirety of the viewport.