Вызов модальных окон из списка
Здравствуйте.
Столкнулся с такой вот задачей и в силу отсутствий хороших знаний по 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:
|
Часовой пояс GMT +3, время: 01:31. |