Как перехватить клик по кнопке в браузере «Назад»?

Question

[Василий]

На сайте предусмотрен такой интерфейс, что при открытии модального окна в мобильной версии, оно занимает всю ширину экрана и внешне похоже на страницу. Интуитивно пользователь нажимает на кнопку назад в браузере и вместо того чтобы выйти из модального окна выходит с сайта.

Как переопределить плик по кнопке назад в браузере?

идея такая

if( 'открыта модалка' ){
$('Клик по кнопке назад в браузере').removeClass('Который отвечает за показ модалки');
}

Comments

[Lord_Dantes]

Как указал ниже автор, верстайте модалку через хэш, ибо так и получается чтобы закрыть её пользователь выходит с сайта вместо выхода из текущего урл

[dollar]

Нажимая на кнопку назад, я ожидаю, что текущая страница со всеми модалками сменится на предыдущую. Зачем вы ломаете привычную логику?

А если модалка напоминает страницу и по смыслу такой является, то почему бы не сделать ее отдельной страницей?

Ну и у модалок обычно яркий заметный крест в углу, который говорит о том, что её можно закрыть.

Answer 1

[Антон]

1) Повесьте показ модального под хэш, тогда при нажатии на кнопку "назад", по идее, должен удалиться только хэш из адреса.
2) Переверстайте нормально, чтобы окно было похоже на окно, была нормальная кнопка закрытия модали

Comments

[Василий]

1. Я правильно понял что открывать окно при помощи добавления #id ?
Сейчас я показываю окно при помощи добавления класса, если я буду показывать окно при добавлении #id то это будет решение?

2. дизайн такой что тут и не переверстаешь особо.

[Антон]

Василий,
Как простой пример

$(window).on('hashchange', function() {
     if(location.hash == '#showmodal') {
     	$('.selector').showModal();
     }
});

[Василий]

Спасибо за ответ, в общем в моём случае нужна другая структура чтобы это организовать.

[Антон]

Василий, На конкретном примере смотреть нужно, так тяжело сказать