grazie a tutti ho risolto.....utilizando qst codice trovato qui

http://www.webstutorial.com/jquery-p...e-popup/jquery


funziona tutto.....l'unico problema che una volta azionato il popup overlay, e una volta chiuso....rimane l'overlay...cioè

lo z-index impostato tramite css è superiore a quello del resto del contenuto....il risultato è che "tutto quello che è sotto" all' overlay nn è cliccabile



il codice è qst


codice:
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>     
<script type="text/javascript"> function openOffersDialog() { 	$('#overlay').fadeIn('fast', function() { 		$('#boxpopup').css('display','block');         $('#boxpopup').animate({'left':'30%'},2500);     }); }   function closeOffersDialog(prospectElementID) { 	$(function($) { 		$(document).ready(function() { 			$('#' + prospectElementID).css('position','absolute'); 			$('#' + prospectElementID).animate({'left':'-100%'}, 1500, function() { 				$('#' + prospectElementID).css('position','fixed'); 				$('#' + prospectElementID).css('left','100%'); 				$('#overlay').fadeOut('fast'); 			}); 		}); 	}); }   
</script> 



 <body onload="openOffersDialog();"> 
<div id="wrapper2">
 <div id="overlay" class="overlay">
</div> 
 <div id="boxpopup" class="box"> 
	<a onclick="closeOffersDialog('boxpopup');" class="boxclose"></a> 
<div id="content"> 
  	</div> 
</div>
</body>  


 <style type="text/css">  
 #wrapper2{ 
	
color:#000000; 	
font-family:tahoma; 
font-size:14px; 	
margin:0 auto; 	
width:800px; 	
margin-top:50px;
 } 


 #wrapper2 a{ 
cursor:pointer; 	
font-size:15px;
 font-weight:bold; 	
text-decoration:underline; 

}  

.overlay {          
bottom: 0;    
 left: 0;     
position: fixed;     
right: 0;    
 top: 0;     
z-index: 1; 	
opacity:0.5; 
}   

.box {  
  background:url("ntyou.jpg") no-repeat white;     
color: #888888;     
height: 505px;     
left: 100%;     
padding: 20px;    
 position: fixed;     
right: 30%;     
top: 25%;     
width: 255px;    
 z-index: 2; 	
border:5px solid #888888;
 border-radius:10px; 	
-moz-border-radius:10px; 
}    

a.boxclose {     
background: url("cel.png") repeat scroll left top transparent;    
 cursor: pointer;     
float: right;     
height: 26px;     
left: 32px;     
position: relative;     
top: -33px;     
width: 26px; 
} </style>

come risolvo?
una volta che si clicca sulla x per chiudere il popup dovrebbe tornare come prima...