Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.10.2013, 07:56
Интересующийся
Отправить личное сообщение для Михаил Мел Посмотреть профиль Найти все сообщения от Михаил Мел
 
Регистрация: 28.03.2011
Сообщений: 27

Несколько 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);
	});
});
Ответить с цитированием
  #2 (permalink)  
Старый 21.10.2013, 09:27
Аватар для BETEPAH
Профессор
Отправить личное сообщение для BETEPAH Посмотреть профиль Найти все сообщения от BETEPAH
 
Регистрация: 23.06.2011
Сообщений: 1,165

По-моему, в 43й строчке 0 надо заменить на 1
var id = name[name.length - 1];

Оформите код в песочнице, без разметки остается только гадать
Ответить с цитированием
  #3 (permalink)  
Старый 21.10.2013, 09:59
Интересующийся
Отправить личное сообщение для Михаил Мел Посмотреть профиль Найти все сообщения от Михаил Мел
 
Регистрация: 28.03.2011
Сообщений: 27

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

http://learn.javascript.ru/play/dCRaic
оформил, но там нужна завяка на БД не знаю как это сделать
Ответить с цитированием
  #4 (permalink)  
Старый 21.10.2013, 10:06
Аватар для BETEPAH
Профессор
Отправить личное сообщение для BETEPAH Посмотреть профиль Найти все сообщения от BETEPAH
 
Регистрация: 23.06.2011
Сообщений: 1,165

ну, как и предполагал. Замените 0 на 1 и все заработает (до 9ти попапов, само собой)
http://learn.javascript.ru/play/4OeRfc
Ответить с цитированием
  #5 (permalink)  
Старый 21.10.2013, 13:03
Интересующийся
Отправить личное сообщение для Михаил Мел Посмотреть профиль Найти все сообщения от Михаил Мел
 
Регистрация: 28.03.2011
Сообщений: 27

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

а что про такой вариант скажете как от этого уйти?
Ответить с цитированием
  #6 (permalink)  
Старый 21.10.2013, 13:10
Аватар для BETEPAH
Профессор
Отправить личное сообщение для BETEPAH Посмотреть профиль Найти все сообщения от BETEPAH
 
Регистрация: 23.06.2011
Сообщений: 1,165

Сообщение от Михаил Мел
http://learn.javascript.ru/play/4OeRfc

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

Последний раз редактировалось BETEPAH, 21.10.2013 в 13:16.
Ответить с цитированием
  #7 (permalink)  
Старый 21.10.2013, 13:22
Интересующийся
Отправить личное сообщение для Михаил Мел Посмотреть профиль Найти все сообщения от Михаил Мел
 
Регистрация: 28.03.2011
Сообщений: 27

нет конечно

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

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

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

)))))
Ответить с цитированием
  #8 (permalink)  
Старый 21.10.2013, 13:34
Интересующийся
Отправить личное сообщение для Михаил Мел Посмотреть профиль Найти все сообщения от Михаил Мел
 
Регистрация: 28.03.2011
Сообщений: 27

и собственно вопрос то у меня был вот еще какой. в начале этого скрипта осуществляется задание 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 я же не могу?
Ответить с цитированием
  #9 (permalink)  
Старый 21.10.2013, 13:47
Аватар для BETEPAH
Профессор
Отправить личное сообщение для BETEPAH Посмотреть профиль Найти все сообщения от BETEPAH
 
Регистрация: 23.06.2011
Сообщений: 1,165

Сообщение от Михаил Мел
просто обе ссылки

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

выводят popup-box-4
а какой же им выводить, если у обоих ссылок в конце стоит 4?
Сообщение от Михаил Мел
туда как прописать id? плодить кучу div я же не могу?
Почему не можете? Я вон наплодил два и не жужу (см. ссылку в 6м сообщении)
Ответить с цитированием
  #10 (permalink)  
Старый 21.10.2013, 13:55
Интересующийся
Отправить личное сообщение для Михаил Мел Посмотреть профиль Найти все сообщения от Михаил Мел
 
Регистрация: 28.03.2011
Сообщений: 27

Сообщение от BETEPAH Посмотреть сообщение
а какой же им выводить, если у обоих ссылок в конце стоит 4?
Почему не можете? Я вон наплодил два и не жужу (см. ссылку в 6м сообщении)
ну хотелось чтобы там стояло 14 и 24 или 104. и Вы вывели просто алерт, а не div с соответствующим id.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Несколько модалных окон simplemodal Yan.Total jQuery 0 13.06.2013 20:14
popup окно в PHP цикле ryobi522 Общие вопросы Javascript 5 10.02.2012 01:18
Отрывается несколько окон facebox lukingnu jQuery 0 05.04.2011 13:55
Проблема с Popup окном vovuslik jQuery 5 12.06.2010 16:12
Как установить свойство родительской страницы после запуска 2х последов. popup окон? ksl Events/DOM/Window 10 23.08.2009 14:06