如何在 Bootstrap 4 上向 Lightbox 添加关闭按钮

Question

对不起我的英语不好...

我从这里获取此代码，但它没有关闭 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按钮，

可以请人简单地说一下如何添加关闭按钮吗？，谢谢！

Answer 1

如果您单击页面上的其他位置，当前的设计是关闭它。

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