Подскажите, пожалуйста, как передать картинку (изображение товара) в выпадающее окно?
Пациент http://snegvlopate.ru/catalog/lopata...s-nakladkoj-5/
Сейчас в выпадающем окне вставлена просто картинка, а нужно чтобы она бралась у самого товара + описание
Буду признателен если подскажете, или в какую хотя бы сторону смотреть. http://www.cyberforum.ru/attachments/869809d1507095039
Здравствуйте Дмитрий Айгистов!
Вот решение, на нативном JavaScript. Для модального окна взят Bootstrap3, но, полагаю, и для других плагинов не трудно будет переделать.
'use strict';
function getImg(containerAttr) { // 3). В контейнере находим картинку, копируем ее, и вставляем в модальное окно.
var container = containerAttr;
var img = container.querySelector('.content__img');
var modalImg = img.cloneNode();
var modalImgContainer = document.querySelector('#myModal .modal-body__img');
modalImgContainer.innerHTML = '';
modalImgContainer.appendChild(modalImg);
}
function checkContainer(relatedTarget) { // 2). Находим контейнер, общий, и для кнопки по которой был сделан клик, и для картинки.
var target = relatedTarget;
while (!target.classList.contains('container')) {
if (target.classList.contains('content')) {
getImg(target);
}
target = target.parentElement;
}
}
$('#myModal').on('show.bs.modal', function(event) { // 1). Находим кнопку по которой был сделан клик
checkContainer(event.relatedTarget);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="content">
<div class="content__photo"><img src="http://via.placeholder.com/350x150/00BFFF/FFFFFF?text=1" alt="Img" class="content__img"></div>
<!-- Button trigger modal -->
<button type="button" class="content__button btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
</div>
</div>
<div class="container">
<div class="content">
<div class="content__photo"><img src="http://via.placeholder.com/350x150/C2ED00/FFFFFF?text=2" alt="Img" class="content__img"></div>
<!-- Button trigger modal -->
<button type="button" class="content__button btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="modal-body__img"></div>
</div>
</div>
</div>
</div>
Всего вам доброго!
Современные инструменты для криптотрейдинга: как технологии помогают принимать решения
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости