Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.03.2013, 19:50
Интересующийся
Отправить личное сообщение для Jekins Посмотреть профиль Найти все сообщения от Jekins
 
Регистрация: 14.03.2013
Сообщений: 12

Вызов модальных окон из списка
Здравствуйте.

Столкнулся с такой вот задачей и в силу отсутствий хороших знаний по 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 вылазило его модальное окно со своей информацией.
Но при этом, что бы код модальных окон был одинаковый и не надо было бы для каждого отдельного модального окна, писать другой идентификатор.
Ответить с цитированием
  #2 (permalink)  
Старый 14.03.2013, 20:11
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Это просто:
<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>
Ответить с цитированием
  #3 (permalink)  
Старый 15.03.2013, 00:57
Интересующийся
Отправить личное сообщение для Jekins Посмотреть профиль Найти все сообщения от Jekins
 
Регистрация: 14.03.2013
Сообщений: 12

Спасибо! Это именно то, что мне нужно было.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
самозакрывающееся меню в виде списка о_О dimitar Элементы интерфейса 4 20.03.2012 15:27
Динамическое добавление выпадающего списка В IE stepennwolf Internet Explorer 3 04.11.2011 17:36
Заполнить список значениями из динамически созданного выпадающего списка zhuzha Элементы интерфейса 0 17.08.2010 14:40
Динамическое обновление списка select (продолжение мытарств) macam Элементы интерфейса 2 25.06.2008 16:04