Как закрыть Lightbox по клику на кнопку “Назад”?

На сайте есть модальное окно Bootstrap 4, в нем фотогалерея, список миниатюр картинок. По клику на миниатюру, она открывается на всю ширину экрана с помощью плагина Lightbox.

После открытия модального окна Bootstrap 4, если нажать кнопку назад (браузерная кнопка назад, или кнопка назад на мобильном телефоне) то мы перейдем на предыдущий сайт, а нужно сделать, чтобы модальное окошко закрылось как если бы мы нажали на кнопку Esc.

Как это сделать для модального окна Bootstrap 4 я в интернете нашел решение, код ниже написал. А вот как такое сделать для Lightbox? Чтобы, когда картинка с помощью него открыта, то по клику на кнопку "Назад", пользователь возвращался к списку миниатюр, а не на совсем другой сайт?

$('.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');
    }
});
  • Вопрос задан
  • 556 просмотров
Решения вопроса 1
@Otrivin
junior full-stack сисадмин
Попробуйте таким скриптом. На уход с сайта можно навесить обработчик (если не ошибаюсь, на мобильных он тоже работает). Примеры - сайты с азино/рекламные.
Готовый код предоставить не готов, с телефона.

Детектим мобильное устройство. Если мобила, навешиваем событие на уход с сайта. Если по его происшествию открыто модальное окно лайтбокса - e.preventdefault и триггерим закрытие лайтбокса.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы