배열 목록에서 선택한 항목에 대한 Popover 모달 (빠른보기) - Twig, Symfony

Question

나뭇 가지에 표시되는 제품의 배열 목록을 갖고 있습니다. 각 제품에 대한 팝업 모달보기 (빠른보기)를 표시하려고합니다. 예를 들어 항목 1에 대한 빠른보기를 클릭하면 항목 1에 대한 정보가 모달 팝업보기에 표시됩니다. 감사합니다

{% extends "::base.html.twig" %} 

{% block body %} 


<header class="page-heading"> 
    <div class="container"> 

     <h2>Collection</h2> 
    </div> 

</header> 

<section class="new-arrivals"> 
    <div class="container text-center"> 
     <div class="items"> 
      <div class="row"> 

       {% for entry in product %} 


        <div class="col-sm-4 item"> 
         <div class="item-image"> 
          <img src="{{ asset('product/'~ entry.imageName) }}" alt="shirt"> 

          <div class="hover-overlay"> 
           <ul class="list-unstyled list-inline"> 
            <li><a class="expand" data-toggle="modal" data-target="#product_view"><i class="icon-expand"></i></a></li> 
           </ul> 
          </div> 

         </div> 
         <div class="item-info"> 
          <h5>{{ entry.name }}</h5> 
          <ul class="price list-unstyled list-inline"> 
           <li class="current">{{ entry.price }}</li> 
          </ul> 
         </div> 
        </div> 

        <div class="modal fade" id="product_view"> 
         <div class="modal-dialog"> 
          <div class="modal-content"> 
           <div class="modal-header"> 
            <a href="#" data-dismiss="modal" class="class pull-right"><span class="glyphicon glyphicon-remove"></span></a> 
            <h3 class="modal-title">{{ entry.name }}</h3> 
           </div> 
           <div class="modal-body"> 
            <div class="row"> 
             <div class="col-md-6 product_img"> 
              <img src="{{ asset('product/'~ entry.imageName) }}" class="img-responsive"> 
             </div> 
             <div class="col-md-6 product_content"> 
              <h4>Product Id: <span>51526</span></h4> 
              <div class="rating"> 
               <span class="glyphicon glyphicon-star"></span> 
               <span class="glyphicon glyphicon-star"></span> 
               <span class="glyphicon glyphicon-star"></span> 
               <span class="glyphicon glyphicon-star"></span> 
               <span class="glyphicon glyphicon-star"></span> 
               (10 reviews) 
              </div> 
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> 
              <h3 class="cost"><span class="glyphicon glyphicon-usd"></span> 75.00 <small class="pre-cost"><span class="glyphicon glyphicon-usd"></span> 60.00</small></h3> 
              <div class="row"> 
               <div class="col-md-4 col-sm-6 col-xs-12"> 
                <select class="form-control" name="select"> 
                 <option value="" selected="">Color</option> 
                 <option value="black">Black</option> 
                 <option value="white">White</option> 
                 <option value="gold">Gold</option> 
                 <option value="rose gold">Rose Gold</option> 
                </select> 
               </div> 
               <!-- end col --> 
               <div class="col-md-4 col-sm-6 col-xs-12"> 
                <select class="form-control" name="select"> 
                 <option value="">Capacity</option> 
                 <option value="">16GB</option> 
                 <option value="">32GB</option> 
                 <option value="">64GB</option> 
                 <option value="">128GB</option> 
                </select> 
               </div> 
               <!-- end col --> 
               <div class="col-md-4 col-sm-12"> 
                <select class="form-control" name="select"> 
                 <option value="" selected="">QTY</option> 
                 <option value="">1</option> 
                 <option value="">2</option> 
                 <option value="">3</option> 
                </select> 
               </div> 
               <!-- end col --> 
              </div> 
              <div class="space-ten"></div> 
              <div class="btn-ground"> 
               <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-shopping-cart"></span> Add To Cart</button> 
               <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-heart"></span> Add To Wishlist</button> 
              </div> 
             </div> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 






       {% endfor %} 


      </div> 
     </div> 
    </div> 
</section> 





{% endblock %} 

사업부 클래스 "DIV 클래스 ="모달 페이드 "ID ="product_view는 ""가 팝 오버를 제공하는 것입니다.

Answer 1

모달 div는 모두 동일한 id 속성을 가지고 있으며 데이터 타겟이이를 참조하므로 첫 번째 팝업 만 열립니다. 해당 ID 및 데이터 대상 속성에 키를 추가하기 만하면

id="product_view_{{loop.index}}"