Теоретически должно помочь.
1. определите, что сейчас используется смартфон/планшет
2. если да: объявите какую-нибудь глобальную переменную, которая отвечала бы за открытие попапа (myPopupOpen) и добавьте это при вызове попапа:
history.pushState(null, null, null); // добавляем пустой стейт в историю
window.onpopstate = function(event) {
if (popupOpen) {
closePopUp(); // закрываем попап
}
window.onpopstate = null; // удаляем обработчик события перехода по истории
};
Но нужно учитывать, что на кнопку 'вперед' мы теперь перейдем на пустой стейт (на странице ничего не поменяется), а удалять стейты нельзя, соответственно у пользователя может возникнуть недопонимание.
Можно решить так:
Использовать какой-нибудь осмысленный якорь history.pushState(null, null, '#myPopup') и обработчик onpopstate сделать глобальным и не удалять, а при срабатывании - смотреть на window.location.hash, если там пусто - скрывать попап, когда он открыт (по той myPopupOpen) и открывать, если там есть якорь нужного попапа.
Переменная тут необходима, потому как мы не можем узнать, что за якорь был на предыдущем стейте (document.referrer возвращает строку до #). Так же важно не наплодить одинаковых стейтов рядом, но тут уже все в ваших руках.
HTML5 History API (хабр)HistoryJS (для тех, кто не поддерживает HTML5 history API)
Средний