View Full Version : opening new box - the right way?

10-29-2006, 03:19 PM

This question is JS&CSS related, but I decided to post it here anyway:

I'm trying to write a function that opens a new box with 100% width & height when clicking on some element (that works with Gecko & IE).
No problem with that, but with something else: how can I make it semi-transparent, and another box inside it - not transparent?

10-29-2006, 04:10 PM
Yes it can be done

10-30-2006, 11:22 AM
Yes, I know it can be done...
Can you give me directions? Is there an article about this kind of thing?

10-30-2006, 03:00 PM
Create a <div> with opacity (different ways of setting it for Gecko and IE) set to 50%, append it to <body>, use fixed positioning (CSS expression hack for IE) and set its width and height to 100% (no margins).
Append the <div> that represents the "inside box" to the above <div>.

10-30-2006, 04:59 PM
But the inside-div gets the opacity too.
Look at this:

display: none;
opacity: 0.7;
filter: alpha(opacity=70);
position: absolute;
right: 0;
top: 0;
background-color: #ffffff;
width: 100%;
height: 100%;}

#opacitydiv div{
opacity: 1;
filter: alpha(opacity=100);
position: absolute;
right: 50%;
top: 50%;}That's it. I tried both with JS createElement, and with simple CSS display:block\none on event onclick.
Nothing works. Any ideas?

10-30-2006, 05:25 PM
you could always try using seperate <div>'s and layer them over each other.

of course the element that you dont want semi-transparent wont be within the semi-transparent element, but i'm sure that wont create too big of a problem.

if you are worried about being able to control both elements at the same time do like so:

<div id="mainDiv">

<transparent div></div>
<regular div></div>


this would be good for hiding and showing both together at the same time.
just hide and show the mainDiv.

10-30-2006, 06:40 PM
Nice, I think I'll try it out. Thanks!