title: CSS for "Popup" not working in FireFox
body: <p>I found some code on the net to do the "popup" form in CSS using a div and the CSS opacity property.  It works great in IE and Chrome, but not FireFox.  In FireFox, nothing happens.  I've seen some issues with FireFox CSS on the boards, but nothing specific to what I'm looking at.  Any help on this issue would be great as I'm pretty new to CSS.  Thanks!</p>
  
  <p>[Here][1] is the site where I got the code for reference.</p>
  
  <p>CSS</p>
  
  <pre><code>        #blanket
      {
          background-color: #111;
          opacity: 0.65;
          filter: alpha(opacity=65);
          position: absolute;
          z-index: 9001;
          top: 0px;
          left: 0px;
          width: 100%;
      }
      #popUpDiv
      {
          position: absolute;
          background-color: #eeeeee;
          width: 300px;
          height: 300px;
          z-index: 9002;
      }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;td align="left"&gt;
                      &lt;div id="blanket" style="display: none;"&gt;
                      &lt;/div&gt;
                      &lt;div id="popUpDiv" style="display: none;"&gt;
                          &lt;table&gt;
                              &lt;tr&gt;
                                  &lt;td&gt;
                                      &lt;a href="#" onclick="popup('popUpDiv')"&gt;Close&lt;/a&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;td style="color: Black;"&gt;
                                      Please describe the issue:
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;td&gt;
                                      &lt;asp:TextBox ID="txtIssue" runat="server" TextMode="MultiLine" Width="275" Height="200"&gt;&lt;/asp:TextBox&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;td&gt;
                                      &lt;asp:Button ID="cmdSend" runat="server" Text="Send" /&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;
                      &lt;/div&gt;
                      &lt;a href="#" onclick="popup('popUpDiv')"&gt;Click here to report an issue.&lt;/a&gt;
                      &lt;br /&gt;
                      &lt;asp:Label ID="lblIssueStatus" runat="server" Text="" Style="color: Red;"&gt;&lt;/asp:Label&gt;
                  &lt;/td&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code> function toggle(div_id) {
      var el = document.getElementById(div_id);
      if ( el.style.display == 'none' ) { el.style.display = 'block';}
      else {el.style.display = 'none';}
  }
  
      function blanket_size(popUpDivVar) {
      if (typeof window.innerWidth != 'undefined') {
          viewportheight = window.innerHeight;
      } else {
          viewportheight = document.documentElement.clientHeight;
      }
      if ((viewportheight &gt; document.body.parentNode.scrollHeight) &amp;&amp; (viewportheight &gt; document.body.parentNode.clientHeight)) {
          blanket_height = viewportheight;
      } else {
          if (document.body.parentNode.clientHeight &gt; document.body.parentNode.scrollHeight) {
              blanket_height = document.body.parentNode.clientHeight;
          } else {
              blanket_height = document.body.parentNode.scrollHeight;
          }
      }
      var blanket = document.getElementById('blanket');
      blanket.style.height = blanket_height + 'px';
      var popUpDiv = document.getElementById(popUpDivVar);
      popUpDiv_height=blanket_height/2-150;//150 is half popup's height
      popUpDiv.style.top = popUpDiv_height + 'px';
  }
  
      function window_pos(popUpDivVar) {
      if (typeof window.innerWidth != 'undefined') {
          viewportwidth = window.innerHeight;
      } else {
          viewportwidth = document.documentElement.clientHeight;
      }
      if ((viewportwidth &gt; document.body.parentNode.scrollWidth) &amp;&amp; (viewportwidth &gt; document.body.parentNode.clientWidth)) {
          window_width = viewportwidth;
      } else {
          if (document.body.parentNode.clientWidth &gt; document.body.parentNode.scrollWidth) {
              window_width = document.body.parentNode.clientWidth;
          } else {
              window_width = document.body.parentNode.scrollWidth;
          }
      }
      var popUpDiv = document.getElementById(popUpDivVar);
      window_width=window_width/2-150;//150 is half popup's width
      popUpDiv.style.left = window_width + 'px';
  }
  
      function popup(windowname) {
      blanket_size(windowname);
      window_pos(windowname);
      toggle('blanket');
      toggle(windowname);     
  }
  </code></pre>