Всем здравствуйте!!! Есть модальное окно (#pop-up), которое появляется при клике на товар из каталога, где только картинки и название товара. Идея такова: нажимаешь на область около картинки товара (.item-box), появляется модальное окно (#pop-up) с его описанием. Подскажите пожалуйста, как сделать, чтобы при клике на блок с товаром (div class = "item-box"), было понятно описание какого именно товара показывать, а не первого, как это реализовано сейчас.
<div class="item-box" data-product="1">
<a href="#" class="item">
<div class="img-box">
<div class="img">
<img src="assets/products/1.png">
</div>
</div>
<div class="title-box">
<div class="align-m">
<span class="title">Хлебцы острые</span>
</div>
</div>
<div class="backing"></div>
</a>
</div>
<div class="item-box" data-product="2">
<a href="#" class="item">
<div class="img-box">
<div class="img">
<img src="assets/products/2.jpg">
</div>
</div>
<div class="title-box">
<div class="align-m">
<span class="title">Хлебцы зерновые с тмином</span>
</div>
</div>
<div class="backing"></div>
</a>
</div>
<div id="pop-up">
<div class="main-gallery">
<div class="gallery-cell">
<div class="product-description">
<span class="product-title">Хлебцы острые с перцем</span>
<div class="full-describe">
<span class="product-benefit">
Мы разработали для Вас «Хлебцы Острые» с перцем, которые используют свойство перца стимулировать выработку эндорфинов – «гормонов счастья», повышающих общий уровень иммунитета человека!
</span>
<span class="composition">Состав: пшеница, паприка, перец красный, кориандр, морская соль.</span>
<span class="nutritional-value">Пищевая ценность на 100 г: белки – 12,0 г; жиры – 1,5 г; углеводы – 72,0 г.
Энергетическая ценность в 100 г – 352 Ккал.</span>
<span class="product-weight">Вес нетто: 65 г.</span>
<span class="expiry-date">Срок годности: 9 мес.</span>
</div>
<div class="img-opis">
<img src="assets/products/1.png" class="image-opis">
</div>
</div>
</div>
<div class="gallery-cell">
<div class="product-description">
<span class="product-title">Хлебцы зерновые с тмином</span>
<div class="full-describe">
<span class="product-benefit">
Хлебцы Зерновые с тмином имеют сбалансированный вкус. Не забывайте о пользе витаминов и минеральных веществ так необходимых вашему организму. Мы используем только натуральные ингредиенты, поэтому наша продукция подходит для ежедневного употребления.
</span>
<span class="composition">Состав: пшеница, хлопья овсяные, крупа кукурузная, тмин, морская соль.</span>
<span class="nutritional-value">Пищевая ценность на 100 г: белки – 14,0 г; жиры – 4,0 г; углеводы – 74,0 г.
Энергетическая ценность в 100 г – 405 Ккал.</span>
<span class="product-weight">Вес нетто: 65 г.</span>
<span class="expiry-date">Срок годности: 9 мес.</span>
</div>
<div class="img-opis">
<img src="assets/products/2.jpg" class="image-opis">
</div>
</div>
</div>
</div>
</div>
$(".item-box").click( function() {
var id = $(this).attr("data-product"),
child = id-1;
$("#pop-up .gallery-cell").eq(child).show();
$("#pop-up").show();
$("#pop-up").css("z-index",3000000);
$("#all").css({"background-color":"rgba(0,0,0,0.6)", "z-index":15000});
var $body = $(document.body),
$popup = $("#pop-up");
$body.on("mousedown", function () {
$popup.hide();
$("#all").css({"opacity":1,"background":"white"});
$popup.on("mousedown", function (e) {
e.stopPropagation();
});
});
$(".main-gallery").flickity({
cellAlign: 'left',
contain: true,
freeScroll: true,
wrapAround: true,
pageDots: false
});
});
В консоли нету ошибок.
