CODEWITHSUNDEEP
jqueryhtmlcss
Steven Zack
Steven Zack

Reputation: 5104

jQuery: how to avoid transparent effect on a mask div

I want to use jQuery to popup a div layer when click attach pic button, in the div there is an embeded div which concludes fileupload control letting user choose file from there computer. I set the css of the mask div 

opacity=0.70

which works fine, but I found that the embeded div also got transparent effect. Even I set the inner div opacity=1.0, it still feels like it is in opcity=0.70. How to avoid the transparent effect on inner div?

Upvotes: 0

Views: 391

Answers (3)

Bruno Vieira
Bruno Vieira

Reputation: 3904

Here's what I did:

$(document).ready(function()
            {
                $(".test").click(function()
                    {
                        $("body").append("<div id=\"transparentDiv\"></div>");
                        $("#transparentDiv").css({opacity:0.7, backgroundColor:"#000", position:"absolute", width:"100%", height:"100%", top:0, zIndex: 4});
                        $("body").append("<div id=\"scalableDiv\"><p>Hello!</p></div>");
                        $("#scalableDiv").css({"width":"10px","height":"10px","backgroundColor":"white","left":"auto","zIndex":"5", opacity:1.0, position: "absolute"});
                        $("#scalableDiv").animate({width:"200px",height:"200px"},"normal","linear");
                    });
            });

BTW, I've started with jQUery 2 days ago, I don't know if this is a proper solution either

Upvotes: 0

jyore
jyore

Reputation: 4825

You could use alpha channel on the parents background.

This will set the background of the parent div to be black with 70% opacity.

.parentDiv {
    backround:rgba(0,0,0,0.7);
}

The child div will have it's own styles too

.childDiv {
    background:red;
}

So you will have a slightly transparent parent with fully opaque child

Also note that you can set the border colors the same way if you need semitransparent or transparent borders

Also note that you can use the filter function too (I think IE has a special one.

filter:alpha(opacity=40)

Upvotes: 0

James Montagne
James Montagne

Reputation: 78690

I think your best bet is to pull the inner div out and just lay it over the top of the transparent div.

Upvotes: 2

Related Questions