Question

当我的模态窗口打开时，我正试图制作“黑暗”区域。这是我写的：第一个函数f_documentSize将返回窗口的大小，第二个函数将生成fullwindow div。它工作得很好，但有滚动条（垂直和水平）。当我滚动它们时，页面变得更大（可用空间）。为什么？

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 = "&nbsp;";
        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

尝试将“模态背景”DIV的显示样式设置为position:absolute，并将其left，top，right和bottom属性设置为0。还要确保其边距为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 */
}

Javascript和淡入淡出区域

1 个答案: