使用模态Quickview选择图像引导程序

Question

我正在为类项目使用Bootstrap模板。除了快速浏览部分外，我已经把所有东西都包装得很好。在我的产品页面上，我有一个产品清单，每个产品都有一个快速浏览按钮。我遇到的麻烦是当你点击快速浏览时显示的图像和描述对所有产品都是一样的。如何创建快速查看，以便每个产品的快速查看按钮都可以为该产品提供特定的快速查看？该页面位于http://capmobile.altervista.org/iphones.html。

整个页面的HTML代码非常长，因此我发布了链接到页面。我希望这是可以的，因为我不确定在这里剪切 - 粘贴哪些代码。

谢谢，

Answer 1

您错过了一个关闭div。所以所有的div都合并到第一个模型中。所以你需要在每个模型弹出代码的末尾添加一个</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> 

更新