I created a sort of modal overlay and then a content with the overlay.. the modal overlay has opacity set and it works but the content of the overlay also has opacity.. i think its inheriting it... I don't really want to apply a new class to the content, is there a way to say only apply 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 the 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);

I created a sort of modal overlay and then a content with the overlay.. the modal overlay has opacity set and it works but the content of the overlay also has opacity.. i think its inheriting it... I don't really want to apply a new class to the content, is there a way to say only apply 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 the 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);

• javascript
• jquery
• css
• opacity

5 Answers 5

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

Since the content is within the overlay the opacity will, at best, be that of the parent (overlay). So, if the parent has an opacity of 0.5 then, visually, all its children can only ever achieve that opacity (no higher).

To avoid this, the elements must be separate in the HTML. I know it's a pain and I think CSS should really have some way of dealing with this but unfortunately it doesn't.

Another method which would work with nested elements is to forget about the opacity property and instead use a PNG image with alpha transparency and set that as the background to the overlay.

If I'm reading your question right, this is just a consequence of the way opacity works right now: child elements inherit opacity as a range so the value of their opacity is normalised against the parent, similar to how height/width can work. So a value of "1" on the child really means "100% of 0.8". There's also no way to have 110% in case you were mentally headed there.

The solutions to this aren't pretty, but the most practical ways are to handle this with a background sibling (so opacity is the concern of something else entirely) - not great for semantics, but effective - or the second way is to use PNGs to do your transparency, but this is subject to legacy IE problems.

Lots of good discussions about this around the net, I keep this one bookmarked.

the following js which was written on 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);

        });
    });

and the following mark up :

<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>

this way your content will not have the same opacity as your modal overlay and seats nicely in the middle of what we all look at sometimes too much!! :)

You're content should not be part of the overlay. The overlay is there to prevent access to the normal content, not to house the modal content.

Instead of appending your content to the overlay div, append it to it's parent and style it so it appears where you would like it.

Also, jQuery UI has a Dialog widget that can be used for modals.

Nice posting. I have been thinking for this a long time to over ride the functionality of mootls sexy alert box. Ali's post is working perfectly but then i have to add teh z index property to make my div appear over the overlay. just a lower zindex for the over lay and a higner zindex for my div worked out. thank you.