如何在 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/