点击JS弹窗关闭按钮后页面刷新弹窗重现，如何修复？

问题根源 #

1. 页面刷新触发：如果按钮实际处于<form>标签内，<button>默认类型是submit，点击会触发表单提交导致页面刷新；哪怕代码里没写form，某些场景下也可能出现这个问题。
2. 弹窗重复显示：当前代码硬编码了popupDisplayed = "false"，还注释了localStorage逻辑，关闭弹窗后没记录状态，刷新页面自然会再次弹出。

修复方案 #

1. 阻止按钮的默认提交行为

给按钮加上type="button"属性，或者在点击事件里调用event.preventDefault()，彻底避免页面刷新。

2. 启用localStorage持久化状态

关闭弹窗时把状态存入localStorage，页面加载时读取这个状态，判断是否需要显示弹窗。

3. 优化弹窗初始状态

把弹窗默认的display设为none，避免页面加载时的闪烁问题。

完整修复代码 #

HTML

<div id="popup-overlay"></div>
<div id="popup-greeting">
  <button id="closeButton" type="button">Close</button>
</div>

CSS

#popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: none; /* 默认隐藏，避免加载闪烁 */
}

#popup-greeting {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  text-align: center;
  display: none; /* 默认隐藏 */
}

JavaScript

// 读取localStorage状态，默认未显示
var popupDisplayed = localStorage.getItem("popupDisplayed") || "false";

window.addEventListener("load", function() {
  if (popupDisplayed !== "true") {
    const popupOverlay = document.getElementById('popup-overlay');
    const popupGreeting = document.getElementById('popup-greeting');

    setTimeout(() => {
      popupOverlay.style.display = 'block';
      popupGreeting.style.display = 'block';
    }, 1000);
  }
});

document.querySelector("#closeButton").addEventListener("click", function(event) {
  // 阻止默认行为，防止页面刷新
  event.preventDefault();
  
  const popupOverlay = document.getElementById('popup-overlay');
  const popupGreeting = document.getElementById('popup-greeting');

  popupOverlay.style.display = 'none';
  popupGreeting.style.display = 'none';

  // 记录弹窗已关闭的状态
  localStorage.setItem("popupDisplayed", "true");
});

补充说明 #

• 加type="button"是最稳妥的方式，不管按钮是否在form里，都不会触发提交行为。
• localStorage会把状态存在浏览器里，除非用户清除缓存，否则下次打开页面不会再显示弹窗。
• 初始隐藏弹窗可以避免页面刚加载时弹窗一闪而过的问题。

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