javascript - 如何在 Bootstrap 4 上向 Lightbox 添加关闭按钮
问题描述
对不起我的英语不好...
我从这里获取此代码,但它没有关闭 Botton。
在我拥有的网站的上方,
<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"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"> </script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.2.0/ekko-lightbox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.2.0/ekko-lightbox.min.css" rel="stylesheet" />
在我的 HTML 中,
<div class="container">
<div class="row">
<a href="photo/113.jpg" data-toggle="lightbox" data-gallery="gallery" class="col-md-3" >
<img src="photo/113.jpg" class="img-fluid rounded">
</a>
<a href="photo/2-2.jpg" data-toggle="lightbox" data-gallery="gallery" class="col-md-3">
<img src="photo/2-2.jpg" class="img-fluid rounded">
</a>
<a href="photo/3-2.jpg" data-toggle="lightbox" data-gallery="gallery" class="col-md-3">
<img src="photo/3-2.jpg" class="img-fluid rounded">
</a>
</div>
</div>
样式.scss
.row {
margin: 15px;
}
image { width: 70%; padding-left: 3rem;}
Javacript 代码,
$(document).on("click", '[data-toggle="lightbox"]', function(event) {
event.preventDefault();
$(this).ekkoLightbox();
});
但是怎么显示图片我没有来close按钮,
可以请人简单地说一下如何添加关闭按钮吗?,谢谢!
解决方案
如果您单击页面上的其他位置,当前的设计是关闭它。
[https://codepen.io/nsom/pen/VbqLew][1]
这是添加关闭按钮的方法
$(document).on("click", '[data-toggle="lightbox"]', function(event) {
event.preventDefault();
$(this).ekkoLightbox({alwaysShowClose: true});
});
这是使用的库的链接 https://ashleydw.github.io/lightbox/
推荐阅读
- apache-camel - 使用 Apache camel 读取 xml 文件并将其发送到休息服务
- imagemagick - 如何在imagick中实现像翘曲一样的Photoshop
- ios - 使用 UIGraphicsPDFRenderer 创建 PDF 时添加页脚,如“y 页 x”
- node.js - 如何在 Heroku 上部署 reactJS + nodeJS 应用程序?
- django - 如何修复 uWSGI 内部路由?
- java - 带有 NTLM 身份验证的 Spring WebClient
- vue.js - framework7 vue简单项目中路由'/'的参考索引/home/主视图
- php - 如何将来自查询 sql 结果的相等信息分组到 php
- android-spinner - 在低于或等于 23 的 android 版本中,微调器中的选定项目为白色
- sql - 在sql中计算总数