如何将关闭按钮X设置为Bootstrap画廊灯箱？

Question

I have a bootstrap image gallery with lightbox and I'd like to show the close button X on the modal lightbox. This is my HTML:

    <div class="col-lg-4 col-sm-6 col-xs-12">
        <div class="thumbnail">
            <a href="https://farm1.staticflickr.com/665/23578574946_b6f90e1ca8_k.jpg" data-toggle="lightbox">
                <img src="https://farm1.staticflickr.com/665/23578574946_b6f90e1ca8_k.jpg" class="img-fluid">
            </a>
        </div>
    </div>

And this is my JS:

$(document).on('click', '[data-toggle="lightbox"]', function(event) {
        event.preventDefault();
        $(this).ekkoLightbox();
    })

I know, I should set 'alwaysShowClose' to 'true' but I don't understand where.

Answer 1

You pass the paramenter on the function call

$(document).on('click', '[data-toggle="lightbox"]', function(event) {
        event.preventDefault();
        $(this).ekkoLightbox({
            alwaysShowClose: true
        });
    })

Answer 2

The close button for a modal in Bootstrap 4 is this:

<button type="button" class="close" data-dismiss="modal" aria-label="Close">
    <span aria-hidden="true">&times;</span>
</button>

The × thingy is the X.

But in order for that button to work, you must use proper modal components.

Here's a working example:

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <!-- Button trigger modal --> <div class="container m-1"> <div class="row"> <div class="col-lg-4 col-sm-6"> <button type="button" class="btn" data-toggle="modal" data-target="#exampleModal"> <div class="thumbnail"> <img src="https://farm1.staticflickr.com/665/23578574946_b6f90e1ca8_k.jpg" class="img-fluid"> </div> </button> </div> </div> </div> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <img class="img-fluid" src="https://farm1.staticflickr.com/665/23578574946_b6f90e1ca8_k.jpg" alt=""> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> 

Reference:

https://getbootstrap.com/docs/4.0/components/modal/