title: Opacity becoming transparent in browser
body: <p>I just stuck with the opacity issue again. I tried something like this:</p>
  
  <pre><code> var hiddenSection = $('div.hidden');
   hiddenSection.show()
          .css({ 'display': 'block' })
          .css({ width: $(window).width() + 'px', height: $(window).height() + 'px' })
          .css({ top: ($(window).height() - hiddenSection.height()) / 2 + 'px',left: ($(window).width() - hiddenSection.width()) / 2 + 'px'})
          .css({ 'background-color': '#333333', 'filter': 'alpha(opacity=70)', 'opacity': '0.7' })
          //.css({ 'background-color': 'rgba(105,105,105,0.8)' })
          .appendTo('body');
  </code></pre>
  
  <p>This thing is working fine with IE8 but some how in Chrome, Firefox i am getting this result:</p>
  
  <p><strong>Screenshot:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/azwPb.png" alt="enter image description here"></p>
  
  <p>It is completely become transparent but i don't want to make popup transparent.how can i crack this?</p>
  
  <p>Any help is greatly appreciated.</p>