title: CSS: Shadow overlay
body: <p>I am trying to add a shadow overlay behind the dialog box. I ran into an issue that I don't quite know how to fix.  </p>
  
  <p>This is the code I have: <a href="http://jsfiddle.net/kxbP4/" rel="nofollow">jsfiddle</a>   </p>
  
  <p>There is the div with class shadowDialog.  </p>
  
  <pre><code>.shadowDialog {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #000;
      filter: alpha(opacity=50);
      -moz-opacity: 0.5;
      -khtml-opacity: 0.5;
      opacity: 0.5;
      z-index: 665;
      //display: none;
  }  
  </code></pre>
  
  <p>It should cover the whole space. However, it covers only the space that I can see when I open the dialog and not the rest of the space that I can scroll to (in the downside).</p>