如何使用浏览器后退按钮关闭overlay遮罩层？现有实现仅生效一次如何修复？

问题原因 #

你仅在页面初始化时执行了一次history.pushState({}, '')操作：

• 首次点击按钮唤起遮罩层时，历史栈中已存在初始化时添加的自定义记录
• 点击后退按钮时，该自定义记录被弹出历史栈，触发onpopstate事件隐藏遮罩层
• 后续再次点击按钮唤起遮罩层时，历史栈中没有新增的自定义记录，此时点击后退按钮会直接退出当前页面，不会再触发onpopstate事件执行隐藏遮罩的逻辑，因此效果仅生效一次。

修复方案 #

将history.pushState的调用逻辑移到按钮点击的回调函数中，每次打开遮罩层时都向历史栈新增一条自定义记录即可，同时可以增加遮罩状态判断避免重复添加历史记录。
修改后的JS代码如下：

$("button").click(function() {
  // 只有遮罩当前是隐藏状态时，才新增历史记录并显示遮罩
  if($("#overlay").css("display") === "none") {
    history.pushState({}, '');
    $("#overlay").css("display", "block");
  }
});

window.onpopstate = function() {
  $("#overlay").css("display", "none");
};

其余CSS和HTML代码无需修改，调整后每次点击按钮打开遮罩都会新增一条历史记录，点击后退按钮都会触发popstate事件隐藏遮罩，功能可重复生效。

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