.
20 ноября 2013

Javascript — передача параметра в модальное окно fancybox

posted in Javascript, Полезности, Программирование, Сайтостроение |

Вроде элементарное ТЗ — а промучался полдня.
При клике на «купить» — должно появляться модальное окно «Товар добавлен в корзину» «продолжить покупки» «оформить заказ»
В качестве модального окошка решено использовать скриптик JancyBox — и центрируется и затемняет, в общем всё устраивает!
кроме одного НО! — при нажатии на «купить» товар сначала должен «упасть» в корзину, т.е. нужно вызвать соответствующую функцию с передачей в качестве параметра ID товара

Buy 1111
Buy 2222
$(".modal").fancybox({
	'onStart': function() {
    	      var id = $(this).attr('rel');
              alert(id);
           }
});

Так не пашет! — даёт «undefined»

Как вариант — повесить сначала click — в нём сделать нужный вызов, а потом открыть окно имитацией клика
$(«#id2»).trigger ('click');

    $("#id1").click(function() {
    	var id = $(this).attr('rel');
    	$("#inline1").html(id);
	$("#id2").trigger('click');
    });

Но почему-то в таком варианте модальное окно выводится сначала вверх потом только центрируется. Облом!

Гуглим далее — нашел свою обработку Тайтла с помощью собственной фукнции вешаемой параметром TitleFormat
Внутри которой дёрнуть rel можно следующим образом $(currentArray[currentIndex]).attr ('rel')

Т.е. вместо задания тайтла я получу ID и вызову нужную мне функцию.

На этом «мудрёном» варианте и остановлюсь — через задний проход конечно, но работает :)

P.S.
С вопросом по решению проблемы я создал 3 поста на форумах
phpclub.ru
javascript.ru/forum/
forum.searchengines.ru

На первом ноль реакции, на втором попытались помочь — но безуспешно
На javascript.ru/forum — 200 % попадание в цель!
На основе моего вопроса был создан готовый рабочий пример! В личке вебмастер ответил на мой вопрос — откуда именно инфа с указанием прямых ссылок на нужный мне пример в мануале!

Собственно, как обычно
Рони ответил в ПМ — за что ему ещё раз огромное спасибо!

Как обычно — всё гениальное просто — «Meditate on documentation!»

Дока тут http://fancyapps.com/fancybox/
Пример с передачей ID тут http://jsfiddle.net/Se8Yu/

Яндекс.Метрика