使用 jQuery 在同一个站点上打开一个窗口

Question

对不起我的英语...

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

图片中的代码

<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>

Here 是来自站点的代码。

我使用带有网格布局的 Bootstrap 4。

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

请有人帮助我并用简单的话解释如何用jQuery解决这个问题，谢谢

Answer 1

您似乎在寻找模态。 Bootstrap 官方文档对你的工作有清晰详细的指导。按照这个链接。 https://getbootstrap.com/docs/4.4/components/modal/

注意：在使用 Bootstrap modals 之前，您需要在项目中设置 jquery 和 popper.js。您需要单独下载它们。然后，您可以在项目中本地使用它们，或者如果您不需要下载它们，则使用 CDN。此链接将指导您。 https://getbootstrap.com/docs/4.4/getting-started/download/