title: Javascript and fading area
body: <p>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? </p>
  
  <pre><code>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 &amp;&amp; (document.body.scrollLeft || document.body.scrollTop )) {
          n_scrollX = document.body.scrollLeft;
          n_scrollY = document.body.scrollTop;
      }
      else if (document.documentElement &amp;&amp; (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 &amp;&amp; (document.documentElement.clientWidth || document.documentElement.clientHeight))
          return [document.documentElement.clientWidth, document.documentElement.clientHeight, n_scrollX, n_scrollY];
      if (document.body &amp;&amp; (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 &amp;&amp; !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 = "&amp;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';
  }
  </code></pre>