title: CSS popup div unclickable background content, work only in ie8?
body: <p>Before asking this question i saw the question: <a href="https://stackoverflow.com/questions/3975688/css-background-opacity-with-rgba-not-working-in-ie-8">CSS background opacity with rgba not working in IE 8</a> but didn't work for me. I make a popup using only css. It works in ie9+ and mozilla25+ the css that i use to do that:
  HTML:</p>
  
  <pre><code>&lt;div id="backgroundFilter"&gt;
      &lt;div id="overBackgroundFilter"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  #backgroundFilter 
  {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(184, 184, 184, 0.5);
  }
  
  #overBackgroundFilter 
  {
  position: static;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  height: 385px;
  width: 400px;
  background-color: #F8F8F8;
  border-width: 6px;
  border-color: #E0E0E0;
  border-style: solid;
  }
  </code></pre>
  
  <p>I change my css for ie8, it works for ie8 but it didn't for mozilla.In mozilla opacity is passed from backgroundFilter to overBackgroundFilter, i want that only backgroundFilter  is trasparent and overBackgroundFilter not. Any ideas? Here is the css changed for ie8:</p>
  
  <pre><code>#backgroundFilter 
  {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #B8B9BB;
  -moz-opacity: 0.50;
  opacity: 0.50;
  filter: alpha(opacity =50);
  }
  
  #overBackgroundFilter 
  {
  position: absolute;
  display: block;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  height: 385px;
  width: 400px;
  background: #F8F8F8;
  border-width: 6px;
  border-color: #E0E0E0;
  border-style: solid;
  }
  </code></pre>
  
  <p>Thanks!</p>