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

Question

[Айрат Шакуров]

На сайте 2test.shakurow.ru есть раздел "природные камни" так вот там при клике на подробности и цены открывается модальное окошко, но после открытия если нажать кнопку назад(браузерная кнопка назад) то мы перейдем на предыдущий сайт, в общем суть такая чтобы модальное окошко закрылось как если бы мы нажали на кнопку Esc

Помогите пожалуйста) Может кто уже решал такие вопросы?

Answer 1

[Айрат Шакуров]

Решение

Вот как я решил свой вопрос:

$('.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 2

[iBird Rose]

как вариант при открытии пустить на якорь. типа #test
тогда при нажатии назад будет уходить обратно на главную

Answer 3

[Эдуард]

$('.modal').on('hidden.bs.modal', function (e) {
  history.pushState('', document.title, window.location.pathname);
  console.log($(this).attr('data-m'));
});

$(window).bind('hashchange', function() {
	if(window.location.hash == ''){//Если после # ничего нет, значит закрываем модальное окно(попробуйте открыть модальное окно и в адресной строке удалить все после # после чего у вас закроется модальное окно)
		$('.modal').modal('hide');
	}
});

Взял с вашего примера.

history.pushState - позволяет добавить новую запись в сессию истории текущего окна (вкладки). Добавление записи (элемента) осуществляется в конец сессии истории.

Т.е. вы просто добавляете страницу якобы предыдущую и там уже обрабатываете нужное вам действие.

Comments

[Айрат Шакуров]

Да Эдуард, я после размещения вопроса написал все это и получилось) не успел опубликовать решение..)