如何将高分页面改为点击按钮弹出的弹窗展示相同数据？

问题背景 #

已完成高分系统核心功能（分数存储、修改、用户名添加），当前点击HighScore按钮会跳转至独立高分页面，需求改为点击按钮时弹出窗口展示相同高分数据。

解决方案步骤 #

1. 添加弹窗HTML结构 #

在需要触发弹窗的页面（如首页index.html或游戏页面game.html）中添加弹窗DOM结构，复用原高分页面核心内容：

<!-- 高分弹窗（默认隐藏） -->
<div id="highScoreModal" class="modal">
  <div class="modal-content flex-center flex-column">
    <button class="modal-close-btn" onclick="closeHighScoreModal()">×</button>
    <h1>High Scores</h1>
    <ul id="modalHighScoresList"></ul>
    <button class="btn" onclick="closeHighScoreModal()">Close</button>
  </div>
</div>

2. 添加弹窗CSS样式 #

在app.css中添加弹窗样式，实现遮罩层、居中显示与隐藏逻辑：

/* 弹窗遮罩层 */
.modal {
  display: none; /* 默认隐藏 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1000;
}

/* 弹窗内容容器 */
.modal-content {
  background-color: #fff;
  padding: 2rem;
  border-radius: 8px;
  width: 80%;
  max-width: 500px;
  position: relative;
}

/* 关闭按钮 */
.modal-close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.5rem;
  border: none;
  background: none;
  cursor: pointer;
  color: #666;
}

/* 弹窗激活状态 */
.modal.active {
  display: flex;
  justify-content: center;
  align-items: center;
}

3. 修改JS逻辑实现弹窗控制 #

创建modal.js文件，整合高分渲染与弹窗控制逻辑：

// 获取弹窗元素和高分列表容器
const highScoreModal = document.getElementById('highScoreModal');
const modalHighScoresList = document.getElementById('modalHighScoresList');

// 渲染高分数据到弹窗
function renderHighScores() {
  const highScores = JSON.parse(localStorage.getItem("highScores")) || [];
  modalHighScoresList.innerHTML = highScores
    .map(score => {
      return `<li class="high-score">${score.name} - ${score.score}</li>`;
    })
    .join("");
}

// 显示弹窗
function openHighScoreModal() {
  renderHighScores(); // 每次打开时加载最新数据
  highScoreModal.classList.add('active');
}

// 关闭弹窗
function closeHighScoreModal() {
  highScoreModal.classList.remove('active');
}

// 点击遮罩层关闭弹窗
highScoreModal.addEventListener('click', (e) => {
  if (e.target === highScoreModal) {
    closeHighScoreModal();
  }
});

4. 同步保存分数后的弹窗数据 #

修改end.js中的saveHighScore函数，确保保存分数后弹窗数据同步更新：

saveHighScore = (e) => {
    e.preventDefault();

    const score = {
        score: mostRecentScore,
        name: username.value,
    };
    highScores.push(score);
    highScores.sort((a, b) => b.score - a.score);
    highScores.splice(5);

    localStorage.setItem('highScores', JSON.stringify(highScores));
    // 新增：更新弹窗数据（如果弹窗已加载）
    if (typeof renderHighScores === 'function') {
      renderHighScores();
    }
    window.location.assign('/');
};

5. 修改按钮触发逻辑 #

将原跳转至高分页面的链接改为弹窗触发按钮：

<!-- 原跳转链接 -->
<!-- <a class="btn" href="/highscores.html">High Scores</a> -->

<!-- 修改为弹窗触发按钮 -->
<button class="btn" onclick="openHighScoreModal()">High Scores</button>

6. 引入必要JS文件 #

在使用弹窗的页面中引入modal.js：

<script src="/assets/js/modal.js"></script>

关键说明 #

• 弹窗默认隐藏，通过添加/移除active类控制显示状态
• 每次打开弹窗时重新渲染数据，确保展示最新分数
• 支持点击关闭按钮或遮罩层关闭弹窗

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