10-29-2006, 02: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-30-2006, 10: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, 02: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, 03:59 PM
But the inside-div gets the opacity too.
Look at this:
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, 04: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:
this would be good for hiding and showing both together at the same time.
just hide and show the mainDiv.
10-30-2006, 05:40 PM
Nice, I think I'll try it out. Thanks!