Форум

GTAlex · #1 (**permalink**) 20.11.2013, 11:20

Есть 2 кнопки "купить" по которым появляется модальное окно fancybox в которое нужно передать ID покупаемого товара

<a class="modal" href="#inline" rel="1111">Buy 1111</a>
<a class="modal" href="#inline" rel="2222">Buy 2222</a>

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

Так не пашет! - даёт "undefined"

рони · #2 (**permalink**) 20.11.2013, 12:10

GTAlex, Meditate on documentation

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>demo</title>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
  <link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
  <script type='text/javascript' src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<script type='text/javascript'>
 $(function()
 		{
 			 $(".modal").fancybox({
             'afterLoad': function() {
    	      var id = $(this.element).attr('rel');
              this.content =  this.content.html()+'<h1>'+id+'</h1>';
             }
          });
 		});
</script>
</head>
<body>
<a class="modal" href="#inline" rel="1111">Buy 1111</a>
<a class="modal" href="#inline" rel="2222">Buy 2222</a>
<div id="inline" style="display: none">
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif"  >
</div>
</body>
</html>

GTAlex · #3 (**permalink**) 20.11.2013, 13:43

onStart меняем на afterLoad и всё пашет!
ммда уж ...

"Meditate on documentation"
и где это написано ?

рони · #4 (**permalink**) 20.11.2013, 13:59

GTAlex,
перейдите на страницу http://fancyapps.com/fancybox/

тут пример нахождения атрибута id
◦Based on element ID

тут пример добавления своего контента
◦Append custom content

GTAlex · #5 (**permalink**) 21.11.2013, 07:08

Рони ответил в ПМ - за что ему ещё раз огромное спасибо!

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

cript · #6 (**permalink**) 04.04.2014, 16:16

Приветствую! Такой вопрос, как эту переменную поместить в инпут?

<input type="hidden" value="javascript:document.write(id);" id="abc"> // не работает
<script type="text/javascript">
$(document).ready(function() {
$(".modalbox").fancybox({
'afterLoad': function() {
var id = $(this.element).attr('rel');
this.content =  this.content.html()+id;               
}
});
});
</script>

Так же пробовал делать так
function setVal() {
document.getElementById('abc').value = id;
}

рони · #7 (**permalink**) 04.04.2014, 16:29

cript,
немогу вам помочь ибо вижу пока бред и в коде и в вопросе

cript · #8 (**permalink**) 04.04.2014, 16:35

А в чем бред?
Передаем переменную в модальное окно, хотелось бы поместить ее в value инпута, только что-то не выходит..
В документации написано делать так $("#abc").val(id); , но это не работает..

рони · #9 (**permalink**) 04.04.2014, 16:39

cript,
а где код модального окна и всё остальное

cript · #10 (**permalink**) 04.04.2014, 16:44

<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<script type='text/javascript' src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<div id="inline">
<h3>Системное сообщение</h3>
<form name="delete" action="#" method="post">
<p>Текст</p>
<input type="hidden" id="abc" name="abcid">
<input type="submit" name="del" id="send" value="Да">
</div>
</form>
</div>
<script type="text/javascript">
$(document).ready(function() {
$(".modalbox").fancybox({
'afterLoad': function() {
id = $(this.element).attr('rel');     
}
}); 
});
</script>
<a class="modalbox" href="#inline" rel="9">Popup</a>

Форум

Справочник

Discord чат

Курсы javascript