Несколько popup окон
 

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

задача на 1 странице показывать несколько окон с уникальным id.
нашел интересный код, но он почему-то не работает

в теле выводится ссылка с присвоемнием id классу

<a class="popup-link-<?php echo $paru2['id']; ?>" href=#>Написать сообщение</a><br>

как мне надо изменить первые две строки в функции, чтобы открывались окна с соответствующими id?? иначе открывается только окно id = 1 (popup-box-1)

$(document).ready(function() {
	
	//$('body').append('<div class="popup-box" id="popup-box-1"><div class="close">X</div><div class="top"><h2></h2></div><div class="bottom">er</div></div>');
	//$('body').append('<div id="blackout"></div>');
	
	
	var boxWidth = 400;
	
	function centerBox() {
		
		/* Preliminary information */
		var winWidth = $(window).width();
		var winHeight = $(document).height();
		var scrollPos = $(window).scrollTop();
		/* auto scroll bug */
		
		/* Calculate positions */
		
		var disWidth = (winWidth - boxWidth) / 2
		var disHeight = scrollPos + 150;
		
		/* Move stuff about */
		$('.popup-box').css({'width' : boxWidth+'px', 'left' : disWidth+'px', 'top' : disHeight+'px'});
		$('#blackout').css({'width' : winWidth+'px', 'height' : winHeight+'px'});
	
		return false;
	}
	
	
	$(window).resize(centerBox);
	$(window).scroll(centerBox);
	centerBox();	

	$('[class*=popup-link]').click(function(e) {
	
		/* Prevent default actions */
		e.preventDefault();
		e.stopPropagation();
		
		/* Get the id (the number appended to the end of the classes) */
		var name = $(this).attr('class');
		var href = $(this).attr('href');
		var id = name[name.length - 0];
		var scrollPos = $(window).scrollTop();
		
		/* Show the correct popup box, show the blackout and disable scrolling */
		/*$("#popup-box-"+id+" div.bottom").load(href);*/
		
		$('#popup-box-'+id).show();
		$('#blackout').show();
		$('html,body').css('overflow', 'hidden');
		
		/* Fixes a bug in Firefox */
		$('html').scrollTop(scrollPos);
	});
	$('[class*=popup-box]').click(function(e) { 
		/* Stop the link working normally on click if it's linked to a popup */
		e.stopPropagation(); 
	});
	$('html').click(function() { 
		var scrollPos = $(window).scrollTop();
		/* Hide the popup and blackout when clicking outside the popup */
		$('[id^=popup-box-]').hide(); 
		$('#blackout').hide(); 
		$("html,body").css("overflow","auto");
		$('html').scrollTop(scrollPos);
	});
	$('.close').click(function() { 
		var scrollPos = $(window).scrollTop();
		/* Similarly, hide the popup and blackout when the user clicks close */
		$('[id^=popup-box-]').hide(); 
		$('#blackout').hide(); 
		$("html,body").css("overflow","auto");
		$('html').scrollTop(scrollPos);
	});
});

По-моему, в 43й строчке 0 надо заменить на 1

var id = name[name.length - 1];

Оформите код в песочнице, без разметки остается только гадать

Да это явная ошибка, но все равно не работает, даже с этим изменением.

http://learn.javascript.ru/play/dCRaic
оформил, но там нужна завяка на БД не знаю как это сделать

ну, как и предполагал. Замените 0 на 1 и все заработает (до 9ти попапов, само собой)
http://learn.javascript.ru/play/4OeRfc

http://learn.javascript.ru/play/4OeRfc

а что про такой вариант скажете как от этого уйти?

От чего уйти? Все же работает :) Алерт выводит id соответствующего div'а.
Добавляйте дивы с этими айди в разметку. Что еще надо-то?
http://learn.javascript.ru/play/OfM4dc
Вы же не думаете, что я буду за вас выдумывать стили для попапов?

нет конечно

просто обе ссылки

<a class="popup-link-14" href=#>Написать сообщение 14</a><br>
<a class="popup-link-24" href=#>Написать сообщение 24</a><br>

выводят popup-box-4

)))))

и собственно вопрос то у меня был вот еще какой. в начале этого скрипта осуществляется задание div с id="popup-box-21" (например)

$('body').append('<div class="popup-box" id="popup-box-21"><div class="close">X</div><div class="top"><h2></h2></div><div class="bottom">er</div></div>');
$('body').append('<div id="blackout"></div>');

, туда как прописать id? плодить кучу div я же не могу?

а какой же им выводить, если у обоих ссылок в конце стоит 4? :)Почему не можете? Я вон наплодил два и не жужу (см. ссылку в 6м сообщении)

ну хотелось чтобы там стояло 14 и 24 или 104. и Вы вывели просто алерт, а не div с соответствующим id.

На коленях прошу, нажмите на ссылку в 6м сообщении.
сюда продублирую ее, чтоб виднее было
http://learn.javascript.ru/play/OfM4dc
вам сколько разных попапов нужно? я указал, что этот скрипт будет работать только с 9ю штуками, перечислю их также на всякий случай:
popup-box-1
popup-box-2
popup-box-3
popup-box-4
popup-box-5
popup-box-6
popup-box-7
popup-box-8
popup-box-9

я нажимал и смотрел работу скрипта - и именно его я хотел бы изменить под свои нужды. можно ли доработать скрипт чтобы у меня было 20 popup окон или 30... или больше.

чтобы были они например

popup-box-14
popup-box-24
popup-box-34
popup-box-44
popup-box-54
popup-box-64
popup-box-74
popup-box-84
popup-box-94

-----

и ссответственно как сделать так чтобы не пришлось заранее писать
девять блоков типа

$('body').append('<div class="popup-box" id="popup-box-1"><div class="close">X</div><div class="top"><h2></h2></div><div class="bottom">первое</div></div>');

а как-нибудь, если возможно сделать запись типа

$('body').append('<div class="popup-box" id="popup-box-'+id+'"><div class="close">X</div><div class="top"><h2></h2></div><div class="bottom">первое</div></div>');

у меня их должно быть либо много либо один, но чтобы туда передавался id той ссылки что я нажал

Если бы нажимали, не говорили быА это
все возможно и ничего сложного нет
Подумайте, как в этой строке
var id = name[name.length - 1];
получить не один, а два последних символа. Намекну - substr, substring.

$('body').append('<div class="popup-box" id="popup-box-'+id+'"><div class="close">X</div><div class="top"><h2></h2></div><div class="bottom">первое</div></div>');

- а как записать данное выражение? если оно должно определяться в начале?

вот после того как определили id в этой строчке
var id = name[name.length - 1];
можете делать див с этим id.
Я не могу никак понять, какой смысл в этих манипуляциях с id, если все равно по каждой ссылке свой будет генерироваться. Зачем тогда вообще определять id? Просто создавайте попап в скрипте и показывайте его сразу.

спасибо за "помощь" буду делать костыли как учили!! ))))

вот это день у меня сегодня!.. Вы уже второй такой саркастичный. Надо завязывать, похоже, с этим альтруизмом. Следующая помощь - платная.
Неужели, чтоб перенести две строчки в коде, надо грузчика нанимать?
Держите помощь: http://learn.javascript.ru/play/WQhou

да дело не в этом, не в сарказме. вы не обижайтесь пожалуйста. Я начинающий, поэтому спрашиваю. Так бы лазил и искал по форумам если б хотел найти готовое решение.

Если сложно подсказать или направить (нет времени или желания например) то так и говорите - ИДИ ЧИТАЙ - ВОТ МАНУАЛ. и все ))

и ваш код работает некорректно. можно 100 попапов открыть с одним id.
и в этом случае не работает

$('.close').click(function() { 
		var scrollPos = $(window).scrollTop();
		/* Similarly, hide the popup and blackout when the user clicks close */
		$('[id^=popup-box-]').hide(); 
		$('#blackout').hide(); 
		$("html,body").css("overflow","auto");
		$('html').scrollTop(scrollPos);
	});

Я тоже людей обучаю, правда не программированию. Я им не говорю иди давай, или врачи не говорят "давай не болей".... )))

Еще раз прошу прощения за испорченный день!!!

администрация, можно топик удалить (он неинформативен) - я решил вопрос по-другому. Спасибо

в каком из сообщений этой ветки есть требование обратного? Я уже несколько раз писал, что не понимаю смысла этой круговерти, отсюда, видимо, и проблемы в нашем диалоге. Может, если бы оформили песочницу, добавили бы стили, плейсхолдеры, было бы понятнее. А так... Думаю, для обоих нас будет полезнее закончить его.
Да нет, работает. При клике закрываются все дивы с "popup-box-", как и прописано в изначальном коде

1 $('html').click(function() {
 2 var scrollPos = $(window).scrollTop();
 3 /* Similarly, hide the popup and blackout when the user clicks close */
 4 $('[id^=popup-box-]').hide();
 5 $('#blackout').hide();
 6 $("html,body").css("overflow","auto");
 7 $('html').scrollTop(scrollPos);
 8 });

- закрывает ))) удаляйте топик. Я сделал по другому