Question

我正在为类项目使用Bootstrap模板。除了Quickview文章之外，我的所有内容都很好。在我的产品页面上，我有一个产品列表，每个产品都有一个快速查看按钮。我遇到的麻烦是当您点击快速查看时显示的图像和描述对于所有产品都是相同的。如何创建快速视图，以便每个产品的快速查看按钮都会显示特定于该产品的快速视图？该页面位于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>

<强>更新

使用模态Quickview Bootstrap选择图像

1 个答案: