Javascript和淡入淡出區域

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 = " "; 
     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 */ 
}