jquery - 在同一站点上打开一个窗口
问题描述
对不起我的英语……</p>
嗨,我希望当有人单击缩放图标时,它会在站点中打开一个小窗口,我将在这个小窗口中描述产品。
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 ..
可以请人帮助我,谢谢!
解决方案
好的,这就是您需要做的。虽然我为您创建了一个示例,但请阅读以下步骤:
- 你需要调用 jQuery CDN 和 Bootstrap JS CDN,
- 您需要在 getbootstrap.com 上的 bootstrap 官方文档中创建一个模式
- 使用那里给定的 MOdal 并像我为您所做的那样在您的缩放按钮上调用 ts trigger,继续并单击缩放按钮。
- 将您的模态内容放在模态正文中,无论您想要什么,图像,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">×</span>
</button>
<div class="modal-body">
put here, whaterver you want
</div>
</div>
</div>
</div>
推荐阅读
- javascript - 当用户单击一个元素时,如何准确地运行一个函数?
- python - IB API:请求不存在的历史数据时出错
- python - Why do we need qresource files?
- pdf - 从 PS 创建 PDF 时使用 Ghostscript 删除白色背景
- c - 为什么变量的存储顺序与声明顺序相反
- java - 使用 elasticsearchoperations 与 elasticsearchtemplate 有什么区别?
- r - 为什么我应该使用 `all_of` 来选择列?
- go - go lint 工具范围关闭检测
- ios - Clang 错误“架构 x86_64 的重复符号”
- api - 使用 API 自定义 Google Ads 用户界面