Здравствуйте.
Столкнулся с такой вот задачей и в силу отсутствий хороших знаний по 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 вылазило его модальное окно со своей информацией.
Но при этом, что бы код модальных окон был одинаковый и не надо было бы для каждого отдельного модального окна, писать другой идентификатор.