Wierd issue with popup JS box & CSS

[jdock1]

If you go to teenftw.com/lock , it pops up a js window, and after the user clicks a link on the popup window it dissapears.

 

My problem is this;

 

The text or content thats behind the JS popup is still visible.

 

I am using css, heres the stylesheet code

@CHARSET "UTF-8";

#win1 {
display: none; 
width: 100%; 
height: 100%; 
z-index: 2; 
position: absolute;
background: #000; 
filter:alpha(opacity=50); 
-moz-opacity:0.5; 
-khtml-opacity: 0.5;
opacity: 0.5;
text-align: center;
}

#win2 {
text-align: center;
width: 500px; 
margin-left: auto;
margin-right: auto; 
background: #fff;  
border: 10px solid #707070;
font-family:trebuchet, "Trebuchet MS", sans-serif;

}

#links a {
text-align:center
font-size: 12px;
text-decoration: none;
font-family: sans-serif;
}

 

& the HTML code for the divs;

 

<div id="win1">
<div id="win2" style="height: 300px">
	<ul id="links">

	</ul>
</div>
</div>

 

Could anybody tell me how I could make the text invisible if the popup is active?

 

Thanks!

[haku]

You have made the window opaque - it only makes sense that text behind it is going to show through. If you don't want the text behind to be visible, remove the opacity settings from your CSS.