Opaque DIV tags refusing to be Opaque

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Steve - 27 Feb 2008 21:22 GMT

Hi;

I'm using
Firefox 2.0.0.12
IE 7.0.5730.11
Safari 3.0.4
Opera 9.26

On Windows XP Professional

I'm learning CSS and I made myself a demo HTML page of how to use
overlaying div tags as a substitute for pop-up windows.

The user loads the page and sees an ordinary HTML form. They press a
button and one div tag covers 100% of the screen making it look like
it is graying the whole screen and the whole form out. Then another
div tag, what I call a "pop-in" box appears over that giving the user
a message with two buttons.

I have two problems.

1. I tried setting the div tag for the "pop-in" box to be opaque but
it is still transparent.

2. If the user right clicks his/her mouse over the "pop-in" div tag
area various gray
patches appear over it.

Any ideas of how I can stop these two problems.

I'm pasting the code for my demo HTML page beneath the "=========".
It might be easier to read if you cut-and-paste it into a text editor.

Thanks much in advance for any help

===========================================================

<html>
<head>
<title>Demonstation: Drop In Window</title>


<style type="text/css">
body
{
height: 100%;
margin: 0;
overflow: hidden;
padding: 0;
width: 100%;
background:white;
}
.overlayScreen
{
display:none;
height:100%;
width:100%;
position:absolute;
top:0px;
left:0px;
background:black;
color:white;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity:0.5;
opacity:0.5;
}
.popin
{
display:none;
height:50%;
width:50%;
position:absolute;
top:25%;
left:25%;
background:yellow;
color:black;
font-size:24pt;
filter:alpha(opacity=100);
-moz-opacity:1;
-khtml-opacity:1;
opacity:1;
}

</style>

<script type="text/javascript">
//-----------------------------------------------------------------------------
function runPopInWindow()
{
// Gray out & lock the screen

document.getElementById('divGrayOutAndLock').style.display='block';
document.getElementById('divPopInWindow').style.display='block';

}// end function runDropDownWindow()
//----------------------------------------------------------------------------
function stopPopInWindow()
{
// Remove Gray-Out Layer & Pop-In Window

document.getElementById('divGrayOutAndLock').style.display='none';
document.getElementById('divPopInWindow').style.display='none';

}// end function stopPopInWindow()
function setSession(choice)
{
document.form1.textContinueSession.value = choice;
stopPopInWindow();

}// end function setSession()
//-----------------------------------------------------------------------------
</script>
</head>

<body>

<div id = "divTitle" align ="center">
<h1>Demonstation: Pop-In Window</h1>
<p> </p>

<form name = "form1" action = "http://www.google.com">
Name of fruit:
<input type = "text" name = "textFruitName">
<br>
<br>

Flavor Of Fruit:
Sweet
<input type = "radio" name = "radioFruitFlavor"
value = "sweet">
Tart
<input type = "radio" name = "radioFruitFlavor"
value = "tart">
<br>
<br>

Color Of Fruit:
<select name = "selectFruitColor">
<option value = "0">Red</option>
<option value = "0">Orange</option>
<option value = "0">Blue</option>
</select>
<br>
<br>

Shape Of Fruit:
<input type="checkbox" name="ckFruitShape"
value="round">Round
<input type="checkbox" name="ckFruitShape"
value="long">Long
<br>
<br>

Quantity of fruit:
<input type = "text" name = "textFruitQuantity">
<br>
<br>

Continue Session ( input from Pop-In Window )
<input type = "text" name = "textContinueSession" >
<br>
<br>
Excecute pop-in window:
<input type = "button" name = "buttonPopInWindow" value =
"Run"
onclick = "runPopInWindow();">

</form>

</div>


<div id="divGrayOutAndLock" class = "overlayScreen"/>


<div id = "divPopInWindow" class = "popin">

Do you want to continue with your session?

<br>
<br>
<input type = "button" name = "buttonContinueSession"
value = "OK" onclick = "setSession('YES');">

<input type = "button" name = "buttonEndSession"
value = "NO" onclick = "setSession('NO');">
</div>

</body>
</html>

Reply to this Message

Ben C - 27 Feb 2008 22:23 GMT

> Hi;
>
[quoted text clipped - 19 lines]
> 1. I tried setting the div tag for the "pop-in" box to be opaque but
> it is still transparent.

I think you may be missing the fact that opacity in CSS3 is "recursive".

Opacity of 0.5 on an element should like the same as if that element and
all its descendents are first rendered to a temporary buffer, in the
normal opaque fashion, and then the _whole ensemble_ blended with
whatever is behind it using an alpha of 0.5.

Opera doesn't do it quite like that though-- it just gives each element
an alpha value equal to the product of all its ancestors' opacities.
They aren't the same thing. But this isn't relevant to your problem.

Either way if you have a div with opacity 0.5 and you set oacity 1.0 on
its child, the child will end up blended at 0.5 with something. You can
never make an element more opaque than any of its ancestors.

So you have to make it a sibling. This kind of thing should work:

<style type="text/css">
#container
{
background-color: green;
position: relative;
height: 500px;
width: 300px;
color: white;
}
#overlay
{
opacity: 0.5;
background-color: black;
position: absolute;
top: 30px;
left: 30px;
bottom: 30px;
right: 30px;
}
#popin
{
background-color: gray;
position: absolute;
top: 60px;
left: 60px;
bottom: 60px;
right: 60px;
}
</style>

...

<div id="container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
<div id="overlay">
</div>
<div id="popin">
Popin
</div>
</div>

Reply to this Message

Steve - 28 Feb 2008 15:41 GMT

> I think you may be missing the fact that opacity in CSS3 is "recursive".
>
> Opacity of 0.5 on an element should like the same as if that element and
> all its descendents are first rendered to a temporary buffer, in the
> normal opaque fashion, and then the _whole ensemble_ blended with
> whatever is behind it using an alpha of 0.5.

> Either way if you have a div with opacity 0.5 and you set oacity 1.0 on
> its child, the child will end up blended at 0.5 with something. You can
> never make an element more opaque than any of its ancestors.

Ben, you are right and thank you for the education. Like I wrote, I
am a beginner at learning this stuff.

My problem is that I want my overlay to cover 100% of the screen and I
want it to be transparent. I want my pop-in box to sit on top of
that and not be transparent. I tried putting both of those divs
into an OPAQUE container div. LOL the result is that the body and
form -- the html page beneath the container div, overlay div, and pop-
in div gets covered up so nothing can be seen.

I tried setting the body as the opaque container but that didn't help.

What I am trying to is to cover an entire HTML page with a transparent
gray haze such that the user can see the content, see the form, but
cannot enter data. Then on top of that gray haze have a solid
message box with buttons.

Can this be done?

Thanks again for the info

Steve

Reply to this Message

Rik Wasmus - 28 Feb 2008 15:52 GMT

>> I think you may be missing the fact that opacity in CSS3 is "recursive".
>>
[quoted text clipped - 23 lines]
> cannot enter data. Then on top of that gray haze have a solid
> message box with buttons.

Yes: absolute positioning, 2 containers (opaque element & container for
pop-in box), don't make the one with the pop-in box a descendant but
rather a sibling with both an apropriate z-index.

Signature

Rik Wasmus

Reply to this Message

Steve - 28 Feb 2008 16:31 GMT

On Feb 28, 10:52 am, "Rik Wasmus" <luiheidsgoe...@hotmail.com>

> Yes: absolute positioning, 2 containers (opaque element & container for
> pop-in box), don't make the one with the pop-in box a descendant but
> rather a sibling with both an apropriate z-index.

Rik;

I'm a noob still learning this stuff so I am not sure I understand
what you wrote.

Do you mean use 2 container divs, one containing the transparent
underlay and one containing the message box, with the message box &
underlay having the same z-index?

It seems that if I have two divs, one under the other, that the top
will become the parent. Can I neutralize that by setting the zindex
in each to be the same?

Reply to this Message

Steve - 28 Feb 2008 16:54 GMT

Rik;

Thinking about how to understand your comments made me stumble across
what the problem was:

<div id = "underlay" />

<div id = "messageBox">
blah blah blah
</div>

I thought <div/> was the same as <div></div> with the "underlay"
div. However, the first style was making the "underlay" div a parent
to the messageBox div. I switched to the second style of closing a
div and the problem cleared up.

Thanks

Reply to this Message

Ben C - 28 Feb 2008 17:24 GMT

> On Feb 28, 10:52 am, "Rik Wasmus" <luiheidsgoe...@hotmail.com>
>> Yes: absolute positioning, 2 containers (opaque element & container for
[quoted text clipped - 13 lines]
> will become the parent. Can I neutralize that by setting the zindex
> in each to be the same?

You may not need to use z-index.

I posted an example of one way to do it earlier. But however you do do
it, the bottom line is to remember that you can never make an element
more opaque than its ancestors.

You could achieve the same effect using pngs with alpha of course--
those are just alphas, not recursive opacities. That might be easier.
Just make a 1x1 pixel semi-opaque png, tile that as the background image
on your overlay that's supposed to grey things out, and then put the
popin on top. Don't set opacity on anything.

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / February 2008

Opaque DIV tags refusing to be Opaque