Несколько 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.