Несколько 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/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 я же не могу? |
Цитата:
Цитата:
|
Цитата:
|
Цитата:
сюда продублирую ее, чтоб виднее было http://learn.javascript.ru/play/OfM4dc Цитата:
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>');
- а как записать данное выражение? если оно должно определяться в начале? |
Цитата:
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);
});
Я тоже людей обучаю, правда не программированию. Я им не говорю иди давай, или врачи не говорят "давай не болей".... ))) Еще раз прошу прощения за испорченный день!!! |
администрация, можно топик удалить (он неинформативен) - я решил вопрос по-другому. Спасибо
|
Цитата:
Цитата:
|
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 });
- закрывает ))) удаляйте топик. Я сделал по другому |
| Часовой пояс GMT +3, время: 23:54. |