Using jquery to create an overlay, but content inherits CSS opacity

Question

I created a kind of modal overlay, and then overlay content. The modal overlay has a set of opacity and it works, but the contents of the overlay also have opacity. I think it will inherit it ... I don’t know, t really want to apply a new class to the content, is there any way to say only in relation to

here is my css

.modal-overlay {
    position: fixed;
    z-index:100;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background: #000000;
    display: none;
}

and my jquery to create model and content

var overlayLayer = $("<div id='office-location'></div>").addClass('modal-overlay'); //THIS HAS THE OVERLAY CLASS OF CSS - SO IT SHOULD HAVE A OPACITY SET AND IT DOES

$('body').append(overlayLayer);

$('<div id="content-for-overlay" style="background-color: white;"></div>').appendTo(overlayLayer);  /// CONTENT IS ALSO HAS OPACITY BUT ITS WRONG

this.render({ to: "content-for-overlay", partial: "office-location-modal" });// THIS Sends a content from one file to my ID content-for-overlay...  Its standard html

$("body").css("overflow", "hidden");
$('#office-location').css("opacity", 0.8).fadeIn(150);
$('#content-for-overlay').css("opacity", 1);

Answer 1

The CSS opacity property is not inherited, although it may seem so.

, , , (overlay). , 0,5, ( ).

, HTML. , , , CSS - , , , .

, , PNG- - .

Answer 2

, , : , , , / . , "1" "100% 0,8". 110%, .

, - ( - - ) - , - PNG , IE.

, .

Answer 3

js, jquery 1.3:

$(document).ready(function() {
        $(document.body).prepend('<div class="modalOverLay"></div>');
        $('.modalOverLay').css({ opacity: 0.5, width: '100%', height: '100%' });
        $('#trigger').click(function() {
            $('.modalOverLay').fadeIn('slow');
            $('.contentBox').css({
                position: 'absolute',
                left: ($(document).width() - $('.contentBox').width()) / 2,
                top: ($(document).height() - $('.contentBox').height()) / 2
            });
            $('.contentBox').fadeIn(500);

        });
    });

:

<a href="#" id="trigger">Trigger Modal pop up</a>
<div class="contentBox">
    <p>I am on overlay but don't have the same opacity</p>
</div>

, , , !:)

Answer 4

. , .

div , , .

, jQuery UI Dialog , .

Answer 5

Good post. I have long been thinking about using the functionality of boxing boxing. The Ali post works fine, but then I have to add the z index property so that my div appears on top of the overlay. just bottom zindex for more lying and higner zindex for my div. thanks.