Передача картинки в PopUp окно - JavaScript [требует правки]

398
05 октября 2017, 14:53

Подскажите, пожалуйста, как передать картинку (изображение товара) в выпадающее окно?

Пациент http://snegvlopate.ru/catalog/lopata...s-nakladkoj-5/

Сейчас в выпадающем окне вставлена просто картинка, а нужно чтобы она бралась у самого товара + описание

Буду признателен если подскажете, или в какую хотя бы сторону смотреть. http://www.cyberforum.ru/attachments/869809d1507095039

Answer 1

Здравствуйте Дмитрий Айгистов!

Вот решение, на нативном 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>

Всего вам доброго!

READ ALSO
Как узнать кто вызвал функцию?

Как узнать кто вызвал функцию?

Есть свойство caller, но в typescript почему то не получается применить https://developermozilla

520
Слайдер с подгрузкой фото из базы

Слайдер с подгрузкой фото из базы

Добрый деньНеобходимо реализовать слайдер с подгрузкой фото такого вида

451
Как отключить авто скролл вверх после выполнения json success?

Как отключить авто скролл вверх после выполнения json success?

Как отключить авто скролл вверх после выполнения json success ? - Проблема в href="#" - вот что вызывает скролл вверх при нажатииНужно по другому делать...

352
Добрый день, вопрос по пхп и bin2hex

Добрый день, вопрос по пхп и bin2hex

Знающие подскажите после прогонки bin2hex пробелы остаются в хексе как "20" как сделать пробелы как "00" ?

340