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

Question

对不起我的英语不好…

如何显示图像

您好，我希望当有人单击缩放图标时，它会在网站中打开一个小窗口，我将在这个小窗口中描述一个产品。

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 warenkorb hinzufü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%; } 

这里有人说可以用JQuery，但我不知道关于JQuery..

请有人帮助我，谢谢！

Answer 1

好的，这就是您需要做的。虽然我已经为您创建了一个示例，但请阅读以下步骤：您需要调用 jQuery CDN 和 Bootstrap JS CDN，您需要创建 getbootstrap.com 上的 bootstrap 官方文档中给出的模式按照那里给出的方式使用 MOdal，只需在缩放按钮上调用 ts 触发器，就像我为您所做的那样，继续并单击缩放按钮。将您的模态内容放入模态主体中，无论您想要什么，图像、div、文本。/*&nbsp; div-zoom-fenster&nbsp; &nbsp;*/.div-zoom { padding: 2%; padding-top: 15%; text-align: left;}/*&nbsp; zum-warenkorb&nbsp; &nbsp; */.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%; }&nbsp;<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">&nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div class="col">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="product-grid">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="product-image">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<a class="link" href="/tachen_&_rucksacke/fenster/mochila_doble_tirantes-violeta.php">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img alt=""&nbsp; class="bild" src="photo/111.jpg">&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</a>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="product-content">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<a class="links" href="/tachen_&_rucksacke/fenster/mochila_doble_tirantes-violeta.php">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p class="title">Mochila doble tirantes Violeta</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="price">$16.00</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div class="div-zoom">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="zum-warenkorb">zum warenkorb hinzufügen</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<i class="fa fa-search-plus" style="font-size: 94%; color: white; background-color:&nbsp; #595959; padding: 3%;" data-toggle="modal" data-target="#zoomWindow"></i>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div></div><div class="modal fade" id="zoomWindow" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">&nbsp; <div class="modal-dialog" role="document">&nbsp; &nbsp; <div class="modal-content">&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <button type="button" class="close text-right" data-dismiss="modal" aria-label="Close">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span aria-hidden="true">&times;</span>&nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; <div class="modal-body">&nbsp; &nbsp; &nbsp; &nbsp; put here, whaterver you want&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; </div>&nbsp; </div></div>