Подключаем Jquery в head страницы

<script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>

Или с сервера Google

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

  Подключаем скрипт всплывашки или в теги его и прямо в код страницы

<script type="text/javascript">
$(function () {
	//script for popups
	$('a.show_popup').click(function () {
		$('div.'+$(this).attr("rel")).fadeIn(500);
		$("body").append("<div id='overlay'></div>");
		$('#overlay').show().css({'filter' : 'alpha(opacity=80)'});
		return false;				
	});	
	$('a.close').click(function () {
		$(this).parent().fadeOut(100);
		$('#overlay').remove('#overlay');
		return false;
	});
});
</script>

 Ссылка, по клику на которую появляется окно, выглядит так

<a class="show_popup" rel="info" href="#">Всплывашка</a>

По классу show_popup срабатывает скрипт - см выше в коде скрипта. Аттрибут rel указывает на див-всплывашку, который изначально в стилях display: none;

А вот и див-всплывашка

<div class="popup info">
		<a class="close" href="#">Close</a>
		<!--здесь что угодно-->					
		
</div>

В нем присутствует ссылка на скрытие окна

<a class="close" href="#">Close</a>

Стили пристрелочные css

#overlay {
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
display:none;
background:#000;
opacity:.8;
}
.popup {
padding:5px 15px 15px;
position:fixed;
top:100px;
left:50%;
display:none;
overflow:hidden;
border:1px solid #ccc;
background:#fff;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
z-index:100;
behavior: url(PIE.htc);
}
.popup a.close {
width:16px;
height:16px;
display:block;
text-indent:-9999px;
position:absolute;
top:10px;
right:10px;
background:url(../images/close.png) no-repeat;}