title: Internet Explorer: Issue with Overlay / opacity
body: <p>I'm trying to create a dialog window using the following CSS:</p>
  
  <pre><code>#blackOverlay {
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #000000;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
      filter: alpha(opacity=80);
      -moz-opacity: 0.8;
      -khtml-opacity: 0.8;
      opacity: 0.8;
      z-index: 1001;
  }
  
  #whiteOverlay {
      display: block;
      position: absolute;
      top: 10%;
      left: 10%;
      width: 80%;
      height: 80%;
      z-index:2002;
      overflow: auto;
      background: #c4e982;
  }
  </code></pre>
  
  <p>and the following JS:</p>
  
  <pre><code>var div = $("&lt;div id='blackOverlay'&gt;&lt;/div");
  $("body").prepend(div);
  
  var div = $("&lt;div id='whiteOverlay'&gt;&lt;/div");
  div.html("Loading......");
  
  var u = "myurl?function=example";
  div.load(u);
  $("body").prepend(div);
  </code></pre>
  
  <p>This works correctly in Firefox, Safari, Chrome and Opera.</p>
  
  <p><strong>Unfortunately it fails in IE</strong>, at least on version 8.0. The color/opacity is only applied to body and NOT on other DIV's. Instead of "hidding" everything behind the blackOverlay, everything (links, buttons, input fields, ...) is still usable although the loaded content is displayed correctly (in front, center of screen).</p>
  
  <p>Any help is appreciated!</p>
  
  <hr>
  
  <p>Thank you jduren for pointing me in the right direction. After attempting to handle it in similar way as described <a href="http://kent.dl.sourceforge.net/project/jqueryshim/jquery.shim.3.js" rel="nofollow noreferrer">here</a> I came up with the following workaround:</p>
  
  <pre><code>function shime() {    
      jQuery.each(jQuery.browser, function(i) {
          if($.browser.msie){
              $('div').each(function() {
              $(this).addClass("shine");
              });
          }
      });
  }
  
  function unshime() {
      jQuery.each(jQuery.browser, function(i) {
          if($.browser.msie){
              $(".shine").each(function() {
                  $(this).removeClass("shine");
              });
          }
      });
  }
  </code></pre>
  
  <p>And the following CSS:</p>
  
  <pre><code>div.shine {
      display: none;
  }
  </code></pre>
  
  <p>I know that it's not the best solution, but I'm getting tired of running in circles due to IE "features".</p>