Вызов модальных окон из списка
 

Здравствуйте.

Столкнулся с такой вот задачей и в силу отсутствий хороших знаний по js, решил обратиться к вам с вопросом.
Дело вот в чём:

Я сделал вывод модальных окон при клике на элемент h3, но если вы посмотрите код:

HTML:

<div class="mod">
			<h3>Ссылка</h3>
			<div class="block">Различный текст <span>Close</span></div>
			<div class="opac"></div>
		</div>
		<div>текст текст текст текст текст текст текст текст текст </div>
		<div>текст текст текст текст текст текст текст текст текст </div>
		<div>текст текст текст текст текст текст текст текст текст </div>
		<div class="mod">
			<h3>Ссылка2</h3>
			<div class="block">Различный текст2 <span>Close</span></div>
			<div class="opac"></div>
		</div>

CSS:

body {
	font: 75%/120% Arial, Helvetica, sans-serif;
	margin:0px;
	padding:0px;
}
h3, span{
	cursor:pointer;
}
.block{
	background-color:#333;
	display:none;
	color:#fff;
	width:500px;
	height:300px;
	padding:20px;
	z-index:2;
	position:absolute;
	top:-60%;
	left:25%;

}
.opac{
	background-color:#000;
	opacity:0.7;
	top:0px;
	width:100%;
	height:100%;
	position:absolute;
	z-index:1;
	display:none;
	cursor:pointer;
}

jQuery:

$(document).ready(function(){
	$('.mod>h3').click(function(){
		$('div.opac').fadeIn('slow');
		$(this).next('div').fadeIn('slow').animate({opacity:'1',top:'25%'},500);
	});
	$('.block span,div.opac').click(function(){
		$('div.opac').fadeOut('slow');
		$('div.block').animate({opacity:'0',top:'-60%'},500);
		
	});
});

То увидите... что бы вызывались окна с разным котентом, я поместил h3 в отдельные блоки и по клику на h3 идёт вызов окна, которое следует за ним.

Вот что нужно сделать:
Все h3, к примеру были в другом месте кода, объединены в список и при нажатии на соответствующий h3 вылазило его модальное окно со своей информацией.
Но при этом, что бы код модальных окон был одинаковый и не надо было бы для каждого отдельного модального окна, писать другой идентификатор.

Это просто:

<div class="title">Title 1</div>
<div class="title">Title 2</div>
<div class="title">Title 3</div>

<div class="block">Block 1</div>
<div class="block">Block 2</div>
<div class="block">Block 3</div>

<script src="//code.jquery.com/jquery-latest.js"></script>
<script>
var $titles = $('.title');
var $blocks = $('.block');

$blocks.hide();

$titles.click(function(){
    var index = $(this).index();
    $blocks.eq(index).show();
});
</script>

Спасибо! Это именно то, что мне нужно было.:thanks: