首页Newsletter弹窗关闭后刷新短暂闪现问题求助

问题核心 #

当前代码仅在点击关闭时为弹窗添加d-none类，但刷新页面后该状态不会保留，且JavaScript需等待HTML完全加载后才执行，导致弹窗先渲染再隐藏，出现短暂闪现。

解决方案 #

结合本地存储保存关闭状态和优先执行状态判断，彻底解决闪现问题：

1. 调整HTML初始状态 #

默认给弹窗添加d-none类，仅当用户未关闭过弹窗时才显示：

<section class="popup jsengo_popup d-none">
    <div class="modal-window">
      <div class="window-window">
        <div class="window-content clearfix">
          <a class="close_edit jsclosepoup" title="Close" href="javascript:void(0)">×
              Something useful for Newsletter...
          </a>
        </div>
      </div> 
    </div>
</section>

2. 更新JavaScript逻辑 #

页面加载时立即读取本地存储状态，决定是否显示弹窗；点击关闭时持久化状态：

document.addEventListener('DOMContentLoaded', function() {
  const popup = document.querySelector('.jsengo_popup');
  const closeBtn = document.querySelector('.jsclosepoup');

  // 读取本地存储，判断是否需要显示弹窗
  const hasClosed = localStorage.getItem('closedNewsletterPopup');
  if (!hasClosed) {
    popup.classList.remove('d-none');
  }

  // 关闭按钮事件
  closeBtn.addEventListener('click', function() {
    popup.classList.add('d-none');
    // 保存关闭状态到本地存储
    localStorage.setItem('closedNewsletterPopup', 'true');
  });
});

3. 可选：添加弹窗过期机制 #

如果希望弹窗在一段时间后（比如7天）再次显示，可存储带时间戳的状态：

document.addEventListener('DOMContentLoaded', function() {
  const popup = document.querySelector('.jsengo_popup');
  const closeBtn = document.querySelector('.jsclosepoup');
  const STORAGE_KEY = 'closedNewsletterPopup';
  const EXPIRE_DAYS = 7;

  const closedRecord = JSON.parse(localStorage.getItem(STORAGE_KEY) || 'null');
  const now = Date.now();

  // 无关闭记录或记录已过期时，显示弹窗
  if (!closedRecord || (now - closedRecord.timestamp) > EXPIRE_DAYS * 24 * 60 * 60 * 1000) {
    popup.classList.remove('d-none');
  }

  closeBtn.addEventListener('click', function() {
    popup.classList.add('d-none');
    // 保存带时间戳的关闭记录
    localStorage.setItem(STORAGE_KEY, JSON.stringify({
      timestamp: Date.now()
    }));
  });
});

关键说明 #

• localStorage可持久化保存用户关闭状态，刷新页面后依然有效；
• 状态判断逻辑在页面DOM加载完成后立即执行，确保弹窗渲染前就完成显示/隐藏判断，从根源避免闪现；
• 默认隐藏弹窗，仅符合条件时才显示，彻底消除初始渲染的闪现问题。

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