JavaScript - закрыть всплывающее окно с кнопкой назад

Хотя я не рекомендую отменять обычное управление историей браузера (кнопка «Назад»), чтобы использовать его по своему усмотрению ....

Я думаю, что единственное, что вы пропустили в своем примере, это то, что закрытие Кнопка не должна закрывать модальное само по себе, а вместо этого просто выполнить событие кнопки (которое в конечном итоге закроет модальное).

Это простое исправление, и оно будет работать так, как вы хотели.

Невозможно сделать это без добавления записей истории браузера, поскольку вы не можете переопределить поведение кнопки «Назад», см. Перехват вызова кнопки «Назад» в моем приложении AJAX: я не хочу, чтобы он что-либо делал ]

Sujumayas ответ - хороший вариант, хотя вы должны ввести некоторую дополнительную переменную, чтобы избежать проблем с историей при открытии нескольких всплывающих окон (например, при многократном нажатии кнопки)

Вот некоторые возможные пример кода:

let popupOpen = false;

$(".popup-link").click(function() {
    showPopup();
});

$(".popup-close").click(function() {
    window.history.back();
});

function showPopup() {
    if (popupOpen) {
        window.history.back();
    }
    popupOpen = true;
    window.history.pushState("forward", null, "");
    $(".popup").addClass("active");
}

function hidePopup() {
    popupOpen = false;
    $(".popup").removeClass("active");
}

$(window).on("popstate", function() {
    hidePopup();
});

Кроме того, обратите внимание, что у вас могут быть проблемы с Opera Mini: https://caniuse.com/#search=history

У вас будет два варианта для реализации этого:

Вариант 1: Использование события window.beforeunload. ссылка

$('.popup-link').click(function() {
  showPopup();
  $(window).on("beforeunload", hidePopup);
});

$('.popup-close').click(hidePopup);

function hidePopup() {
  $(window).off("beforeunload", hidePopup);
  $('.popup').removeClass('active');
}

Демо

Вариант 2: Использование API истории HTML5. Ссылка

$('.popup-link').click(function() {
  showPopup();
  window.history.pushState('popup-open', null, '');
  $(window).on('popstate', hidePopup);
});

$('.popup-close').click(function() {
  if(history.state == 'popup-open')  {
    window.history.back();
  }
  hidePopup();
});

function hidePopup() {
    $(window).off('popstate', hidePopup);
    $('.popup').removeClass('active');
}

Демо

Редактировать : Суджумаи Идея тоже довольно хорошая. Демо

Кроме того, я рекомендую регистрировать события popstate / beforeunload только при необходимости и отменять их регистрацию, когда они вам больше не нужны, чтобы избежать накладных расходов.

Вы можете добавить window.history.go (-2) в ваше popstate. Это должно вернуть вас дважды, что будет вашей исходной страницей до того, как модал добавит pushState запись в ваш объект истории.

И наоборот, вы можете использовать history.back (2) Использовать window.location.href, чтобы вернуться на 2 страницы назад и перезагрузить

Откройте всплывающее окно и попробуйте перейти назад и вперед с помощью кнопок истории браузера.

Просто запустите window.history.back (); при закрытии всплывающего окна.

$('.popup-close').click(function() {
    hidePopup();
    window.history.back();
});