Выбор изображений с помощью Modal QuickStore Bootstrap

Question

Я использую шаблон Bootstrap для проекта класса. У меня все очень хорошо завершено, за исключением роли Quickview. На моей странице продуктов у меня есть список продуктов, и у каждого продукта есть кнопка быстрого просмотра. Проблема, с которой я столкнулась, - это изображение и описание, которое появляется, когда вы нажимаете на быстрый просмотр, одинаково для всех продуктов. Как создать быстрый просмотр таким образом, чтобы кнопка быстрого просмотра каждого продукта вызывала быстрый просмотр, специфичный для этого продукта? Страница находится по адресу: http://capmobile.altervista.org/iphones.html.

HTML-код для всей страницы очень длинный, поэтому я разместил ссылку на страницу. Надеюсь, что все в порядке, поскольку я не уверен, какой фрагмент кода вырезать-вставить здесь.

Спасибо,

Answer 1

Вы пропустили один близкий div. поэтому все divs объединяются внутри первой модели. поэтому вам нужно добавить один конец </div> каждого всплывающего окна модели.

 <div id="iphone7" class="modal fade quick-view" tabindex="-1" role="dialog" > 
       <div class="modal-dialog"> 
       <div class="modal-content"> 
       <div class="modal-body"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
       <div class="media"> 
        <div class="media-left"> 
        <img class="media-object" src="img/products/quick-view/iphone7.jpeg" alt="Image"> 
        </div> 
        <div class="media-body"> 
        <h2>iPhone 7</h2> 
        <h3>$769</h3> 
        <p>iPhone 7All-new dual 12MP cameras. The brightest, most colorful iPhone display ever. The fastest performance and best battery life in an iPhone. Water and splash resistant.* And stereo speakers. Every bit as powerful as it looks this is iPhone 7 Plus. The iPhone 7 Plus comes in 32GB, 128GB, and 256GB. Available in Silver, Gold, Rose Gold, Black, and Jet Black.</p> 
       </div> 
       </div> 
      </div> 
      </div> 
     </div> 

    </div> 

обновленный