浏览器返回按钮无法正常展示未保存修改确认弹窗的问题求助

你的问题核心在于**onbeforeunload事件的浏览器限制**：这个事件是页面卸载前的同步钩子，浏览器不允许在这里使用自定义模态框阻止页面跳转——因为自定义弹窗的动画、交互都是异步的，浏览器不会等待这些异步操作完成，就会继续执行页面卸载流程，所以你的自定义弹窗刚出现就被页面跳转覆盖了。

修正方案 #

我们需要区分两种场景分别处理：

1. 点击页面内链接：可以继续用自定义模态框拦截，因为能通过preventDefault()同步阻止默认跳转行为。
2. 浏览器返回/刷新/关闭标签页：只能依赖onbeforeunload触发浏览器原生确认弹窗，这是浏览器的安全限制，无法用自定义弹窗替代。

同时要统一未保存更改的状态判断，避免变量不一致的问题。

修改后的完整代码 #

var modal = $(".leave_modal");
var modalContent = modal.find(".modal-content");
var deleteBtn = modal.find(".close");
var stayBtn = modal.find(".btn-stay");
var saveBtn = $("#saveBtn");
var clickedLinkURL;

// 初始化模态框样式
modalContent.css({
  transition: "transform 0.3s ease, opacity 0.3s ease",
  transform: "scale(0.8)",
  opacity: 0
});

// 统一判断是否有未保存更改的函数
function hasUnsavedChanges() {
  return $("#changesMade").val() === "true";
}

function openModal() {
  modal.css("display", "block");
  setTimeout(function() {
    modalContent.css({
      transform: "scale(1)",
      opacity: 1
    });
  }, 50);
}

function closeModal() {
  modalContent.css({
    transform: "scale(0.8)",
    opacity: 0
  });
  setTimeout(function() {
    modal.css("display", "none");
  }, 300);
}

// 离开按钮逻辑：跳转目标链接
deleteBtn.on("click", function() {
  closeModal();
  $("body").off("click", "a", preventLinkClick);
  if (clickedLinkURL) {
    window.location.href = clickedLinkURL;
  }
});

// 停留按钮逻辑：关闭弹窗
stayBtn.on("click", closeModal);

// 点击模态框背景关闭弹窗
$(window).on("click", function(event) {
  if (event.target === modal[0]) {
    closeModal();
  }
});

// 拦截页面内链接点击
function preventLinkClick(event) {
  var target = $(event.target);
  if (target.is("a") && target.attr("href") && target.attr("href") !== "#") {
    if (hasUnsavedChanges()) {
      event.preventDefault();
      clickedLinkURL = target.attr("href");
      openModal();
    }
  }
}
$("body").on("click", "a", preventLinkClick);

// 监听表单变化，标记未保存状态
$("input, select, textarea").on("input change", function() {
  $("#changesMade").val("true");
});

// 处理浏览器返回/刷新/关闭：使用浏览器原生确认弹窗
window.onbeforeunload = function(event) {
  if (hasUnsavedChanges()) {
    // 返回提示文本，浏览器会生成原生确认框
    var message = "你有未保存的更改，确定要离开吗？";
    event.returnValue = message;
    return message;
  }
};

function showConfirmationModal(url) {}

关键修改点 #

1. 新增hasUnsavedChanges()函数，统一状态判断逻辑，避免原代码中$("#changesMade").val()和changesMade变量不一致的问题。
2. 重写onbeforeunload事件：不再调用自定义模态框，而是返回提示文本，触发浏览器原生的确认弹窗——这个弹窗是浏览器同步处理的，会等待用户选择后再执行卸载或停留操作。
3. 保留原有的页面内链接拦截逻辑，因为这里可以同步阻止跳转，自定义模态框能正常工作。

注意事项 #

不同浏览器对onbeforeunload的提示文本显示规则不同：部分浏览器会忽略自定义文本，显示默认提示（比如Chrome），但核心的确认/取消功能是一致的，这是浏览器的安全策略，无法绕过。

内容的提问来源于stack exchange，提问作者Anurag