jquery - Opacity becoming transparent in browser -
i stuck opacity issue again. tried this:
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');
this thing working fine ie8 how in chrome, firefox getting result:
screenshot:
it become transparent don't want make popup transparent.how can crack this?
any appreciated.
when apply opacity element opacity reflected on child elements. that's why popup content transparent too.
css3 colors not supported in ie8 (http://caniuse.com/#feat=css3-colors), otherwise rgba work great example.
background: rgba(51, 51, 51, 0.7); /* red, green, blue, alpha */
i suppose layer color #333333 should transparent? move comment box outside of div , center in browser window. way opacity not apply popup element.
markup this:
<div class="hidden"> <div class="comment-box">comment box content</div> <div class="overlay"></div> </div>
Comments
Post a Comment