Probleme avec scrollbar

Bonjour,

Je suis en train de créer un site web et plus particulièrement je suis en train de faire un popup. Ce popup marche bien sauf quand je rajoute le scrollbar. Quand j'ajoute celui ci ma petit croix n'est presque plus visible. J'ai cru que ça venait z-index mais apparement non.

Voici le CSS:

#fade {
	display: none;
	position: fixed; 
	left: 0; 
	top: 0; 
	z-index: 10;
	width: 100%; 
	height: 100%;
	opacity: .80;
}
.popup_block{
	height: 500px;
	width: auto;
	display: none;
	background: #fff;
	padding: 20px; 	
	border: 20px solid #ddd;
	float: left;
	font-size: 1.2em;
	position: fixed;
	top: 50%; 
	left: 50%;
	z-index: 10000;
	overflow: auto;
	-webkit-box-shadow: 0px 0px 20px #000;
	-moz-box-shadow: 0px 0px 20px #000;
	box-shadow: 0px 0px 20px #000;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
img.btn_close {
        width: 48px;
        height: 48px;
        float: right; 
        margin: -20px -20px 0 0;
        z-index: 99999;
}

Voici le code html:

<div id="popup" class="popup_block">
		<h2>Mentions légales</h2>
		<p>Nous vous remercions de votre visite sur notre site et vous remercions de bien vouloir lire attentivement les mentions légales suivantes. Votre
		   utilisation de ce site est soumise à ces mentions légales. Si vous n'êtes pas d'accord avec les termes suivants,
		   nous vous remercions de bien vouloir quitter ce site.</p></div>

Voici le javascript

<!-- Animation popup (page mentions légales)-->
<script type="text/javascript">
$(document).ready(function()
{			   		   
	//When you click on a link with class of poplight and the href starts with a # 
	$('a.poplight[href^=#]').click(function() {
		var popID = $(this).attr('rel'); //Get Popup Name
		var popURL = $(this).attr('href'); //Get Popup href to define size
				
		//Pull Query & Variables from href URL
		var query= popURL.split('?');
		var dim= query[1].split('&');
		var popWidth = dim[0].split('=')[1]; //Gets the first query string value

		//Fade in the Popup and add close button
		$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="images/close.png" class="btn_close" title="Close Window" alt="Close" /></a>');
		
		//Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the css
		var popMargTop = ($('#' + popID).height() + 80) / 2;
		var popMargLeft = ($('#' + popID).width() + 80) / 2;
		
		//Apply Margin to Popup
		$('#' + popID).css({ 
			'margin-top' : -popMargTop,
			'margin-left' : -popMargLeft			
		});
		
		//Fade in Background
		$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
		$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer 
		
		return false;
	});
	
	
	//Close Popups and Fade Layer
	$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
	  	$('#fade , .popup_block').fadeOut(function() {
			$('#fade, a.close').remove();  
	}); //fade them both out
		
		return false;
	});
});
</script>

Merci de votre aide