Динамически передавать данные в модал из динамически созданного набора изображений, используя детали из базы данных MySQL

0

Я создал несколько объектов, используя данные, полученные из базы данных MySQL. Каждый объект содержит кликабельное изображение и 2 заголовка. Я могу щелкнуть изображение, которое связано с модальным, но оно возвращает только 1 модальную информацию с самого последнего объекта независимо от того, какое изображение кликнуто. Пожалуйста помоги.

Следующая часть создает объекты и работает.

<div class="row kprod">
  <?php
    $get_kits = "select * from kitchens ORDER BY k_brand";
    $run_kits = mysqli_query($con, $get_kits);
    while($row_slides=mysqli_fetch_array($run_kits)){
	    $kit_brand = $row_slides['k_brand'];
	    $kit_name = $row_slides['k_name'];
	    $kit_img = $row_slides['k_img'];
	    $kit_desc = $row_slides['k_description'];
	    $kit_id = $row_slides['k_id'];
							
	    echo"
	    <div class='col-12 col-xs-12 col-md-6 col-lg-4 kpindi'>
        <div class='row'>
          <div class='col imgcol'>
            <img class='img-fluid' src='assets/img/$kit_img' href='#portfolio-modal-1' data-toggle='modal'>
          </div>
        </div>
        <div class='row'>
          <div class='col'>
            <div>
              <h5 class='kprodtext' style='font-family:Adamina, serif;'>$kit_brand</h5>
              <h6 class='kprodtext' style='font-family:Adamina, serif;'><em>$kit_name</em></h6>
            </div>
          </div>
       </div>
     </div>";}
     ?>
</div>

Следующая часть - модальная, и я хочу передать данные.

<div id="portfolio-modal-1" class="modal text-center" role="dialog" tabindex="-1">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" type="button" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">x</span></button> 
      </div>
      <div class="modal-body">
        <div class="container text-center">
          <div class="row">
            <div class="col-lg-8 mx-auto">
              <h2  class="kprodtext" style="font-family:Adamina, serif;">
              Brand</h2>
              <hr class="star-dark mb-5">
              <img src="assets/img/image.jpg" class="img-fluid mb-5">
              <h6 class="kprodtext mb-5" style="font-family:Adamina, serif;">
                <i>Name</i>
              </h6>
              <p class="kprodtext" style="font-family:Adamina, serif;">
                Desc
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
Теги:
bootstrap-modal
bootstrap-4

1 ответ

0

Вам нужно назначить разные идентификаторы вашим модалам, иначе только один будет открыт.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню