Wednesday, October 20, 2010

Getting the real height for a modal window

Ever used a modal window? I know that I have.
One of the main problems with it, that when you open it, the background element does not fill the entire document, but only the visible area. For this reason we use a function that gives us the entire scrolling height of the body/documentElement.

//----------------------------------------------------
// getScrollHeight
// return - entire document height
//----------------------------------------------------

function getScrollHeight() {
   var d = document.body;
   var de = document.documentElement;

   return Math.max(d.scrollHeight,
                          de.scrollHeight,
                          d.offsetHeight,
                          de.offsetHeight,
                          d.clientHeight,
                          de.clientHeight
   );
}

To use it in a script just write something like:
document.getElementById('modalWindow').style.height = getScrollHeight() + 'px';

No comments:

Post a Comment