在同一站点上打开一个窗口

Question

对不起，我的英语...

how to show the image

嗨，我想当有人单击缩放图标时，它会在站点中打开一个小窗口，我将用这个小窗口来描述产品。

HTML代码如何构建此图像，

<div class="container-fluid">
    <div class="row">

         <div class="col"> 

          <div class="product-grid">

                <div class="product-image">
                   <a class="link" href="/tachen_&_rucksacke/fenster/mochila_doble_tirantes-violeta.php">
                    <img alt=""  class="bild" src="photo/111.jpg">     
                   </a> 

                </div>

                <div class="product-content">
                     <a class="links" href="/tachen_&_rucksacke/fenster/mochila_doble_tirantes-violeta.php">
                    <p class="title">Mochila doble tirantes Violeta</p>
                    </a>     

                </div>
                    <div class="price">$16.00</div>

                     <div class="div-zoom">

                   <span class="zum-warenkorb">zum warenkorb hinzufügen</span>
                   <i class="fa fa-search-plus" style="font-size: 94%; color: white; background-color:  #595959; padding: 3%;"></i>
                 </div> 
            </div>
        </div>
</div>

添加到购物篮中的Css代码（德语的zum warenkorbhinzufügen。然后单击以缩放图标）

/*  div-zoom-fenster   */

.div-zoom { padding: 2%; padding-top: 15%; text-align: left;}

/*  zum-warenkorb    */
.zum-warenkorb { font-size: 89%; background-color: #bfbfbf; color: #ffffff; padding: 2%; margin-top: 2%; text-align: left;}

.div-zoom i {padding-bottom: 5%; margin-left: 4%; } 

Here有人说可以使用JQuery，但是我不知道JQuery ..

[可以请人帮我，谢谢！

Answer 1

看看引导程序模态。您可以使用类似Live demo示例的方法，但是可以将按钮更改为使用缩放按钮。

https://getbootstrap.com/docs/4.0/components/modal/

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Answer 2

好的，这是您需要做的。尽管我已经为您创建了一个示例，但是请阅读以下步骤：

1. 您需要调用jQuery CDN和Bootstrap JS CDN，
2. 您需要在getbootstrap.com上的bootstrap官方文档中创建给定的模式
   3. 按此处提供的方式使用Modal，然后像我为您所做的那样在缩放按钮上调用ts触发器，继续并单击缩放按钮。
   4. 将您的模态内容放入模态主体中，无论您要使用什么图像，div，文本。

/*  div-zoom-fenster   */

.div-zoom { padding: 2%; padding-top: 15%; text-align: left;}

/*  zum-warenkorb    */
.zum-warenkorb { font-size: 89%; background-color: #bfbfbf; color: #ffffff; padding: 2%; margin-top: 2%; text-align: left;}

.div-zoom i {padding-bottom: 5%; margin-left: 4%; } 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div class="container-fluid">
    <div class="row">

         <div class="col"> 

          <div class="product-grid">

                <div class="product-image">
                   <a class="link" href="/tachen_&_rucksacke/fenster/mochila_doble_tirantes-violeta.php">
                    <img alt=""  class="bild" src="photo/111.jpg">     
                   </a> 

                </div>

                <div class="product-content">
                     <a class="links" href="/tachen_&_rucksacke/fenster/mochila_doble_tirantes-violeta.php">
                    <p class="title">Mochila doble tirantes Violeta</p>
                    </a>     

                </div>
                    <div class="price">$16.00</div>

                     <div class="div-zoom">

                   <span class="zum-warenkorb">zum warenkorb hinzufügen</span>
                   <i class="fa fa-search-plus" style="font-size: 94%; color: white; background-color:  #595959; padding: 3%;" data-toggle="modal" data-target="#zoomWindow"></i>
                 </div> 
            </div>
        </div>
</div>
<div class="modal fade" id="zoomWindow" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      
        <button type="button" class="close text-right" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      <div class="modal-body">
        put here, whaterver you want
      </div>
      
    </div>
  </div>
</div>