Question

I’m trying to make ‘dark’ area when my modal window is opened. Here is what I wrote: the first function f_documentSize will return size of the window, the second one will make fullwindow div.
It works great but there are scrollbars (vertical and horizontal). When I scroll them the page makes bigger (free space). Why?

function f_documentSize () {
    var n_scrollX = 0,
    n_scrollY = 0;

    if (typeof(window.pageYOffset) == 'number') {
        n_scrollX = window.pageXOffset;
        n_scrollY = window.pageYOffset;
    }
    else if (document.body && (document.body.scrollLeft || document.body.scrollTop )) {
        n_scrollX = document.body.scrollLeft;
        n_scrollY = document.body.scrollTop;
    }
    else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
        n_scrollX = document.documentElement.scrollLeft;
        n_scrollY = document.documentElement.scrollTop;
    }

    if (typeof(window.innerWidth) == 'number')
        return [window.innerWidth, window.innerHeight, n_scrollX, n_scrollY];
    if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight))
        return [document.documentElement.clientWidth, document.documentElement.clientHeight, n_scrollX, n_scrollY];
    if (document.body && (document.body.clientWidth || document.body.clientHeight))
        return [document.body.clientWidth, document.body.clientHeight, n_scrollX, n_scrollY];
    return [0, 0];
}

function f_putScreen (b_show) {
    if (b_show == null && !window.b_screenOn)
        return;

    if (b_show == false) {
        window.b_screenOn = false;
        if (e_screen) e_screen.style.display = 'none';
        return;
    }

    if (window.e_screen == null) {
        window.e_screen = document.createElement("div");
        e_screen.innerHTML = " ";
        document.body.appendChild(e_screen);

        e_screen.style.position = 'absolute';
        e_screen.id = 'eScreen';

        if (document.addEventListener) {
            window.addEventListener('resize', f_putScreen, false);
            window.addEventListener('scroll', f_putScreen, false);
        }
        if (window.attachEvent) {
            window.attachEvent('onresize', f_putScreen);
            window.attachEvent('onscroll', f_putScreen);
        }
        else {
            window.onresize = f_putScreen;
            window.onscroll = f_putScreen;
        }
    }

    // set properties
    var a_docSize = f_documentSize();
    e_screen.style.left = a_docSize[2] + 'px';
    e_screen.style.top = a_docSize[3] + 'px';
    e_screen.style.width = a_docSize[0] + 'px';
    e_screen.style.height = a_docSize[1] + 'px';
    e_screen.style.zIndex = 1000;
    e_screen.style.display = 'block';
}

Answer 1

Try setting the “modal background” DIV’s display style to position:absolute and set its left, top, right, and bottom properties to 0. Also make sure its margin is 0.

#modalDiv {
  position:absolute;
  background-color: #CCCCCC;
  -moz-opacity: 0.5;
  opacity: 0.5;
  filter:alpha(opacity=50);
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  z-index: 9999 /* where  10K is the dialog and 9999 > everything else */
}