使用 Modal Quickview Bootstrap 选择图像答案

【问题标题】：Selecting Images With Modal Quickview Bootstrap使用 Modal Quickview Bootstrap 选择图像
【发布时间】：2017-04-16 23:21:26
【问题描述】：

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

整个页面的 HTML 代码非常长，因此我发布了该页面的链接。我希望没关系，因为我不确定要在此处剪切并粘贴哪段代码。

谢谢，

【问题讨论】：

在您的代码中只设置了一个产品型号
附加产品型号在哪里设置？该页面当前列出了两个 iphone，我将其用作测试，直到我整理出模式。

标签： jquery html twitter-bootstrap

【解决方案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>

更新

【讨论】：