S
S
Sergey Konovalenko2018-06-01 10:08:03
JavaScript
Sergey Konovalenko, 2018-06-01 10:08:03

How to close Lightbox on back button click?

The site has a Bootstrap 4 modal window, it contains a photo gallery, a list of image thumbnails. By clicking on a thumbnail, it opens to the full width of the screen using the Lightbox plugin.
After opening the Bootstrap 4 modal window, if we press the back button (browser back button, or the back button on mobile phone) then we will go to the previous site, and we need to make the modal window close as if we clicked on the Esc button.
How to do this for a Bootstrap 4 modal window, I found a solution on the Internet, I wrote the code below. But how to do this for Lightbox? So that when the picture is opened with it, then by clicking on the "Back" button, the user returns to the list of thumbnails, and not to a completely different site?

$('.modal').on('shown.bs.modal', function (e) {
    window.location.href = '#' + $(this).attr('data-m');
});

$('.modal').on('hidden.bs.modal', function (e) {
    history.pushState('', document.title, window.location.pathname);
});

$(window).bind('hashchange', function() {
    if(window.location.hash == ''){
        $('.modal').modal('hide');
    }
});

Answer the question

In order to leave comments, you need to log in

1 answer(s)
O
Otrivin, 2018-06-01
@sergeykonovalenko

Try this script. You can attach a handler to leave the site (if I'm not mistaken, it also works on mobile). Examples are casino/advertising sites.
Ready code is not ready to provide, from the phone.
We detect a mobile device. If mobile, we attach an event to leave the site. If the lightbox modal window is opened by its occurrence - e.preventdefault and trigger to close the lightbox.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question