如何用JavaScript根据页面URL修改模态框内文本？

1. 整理项目数据 #

先把每个项目的信息统一存到一个对象里，用页面的唯一标识（比如URL里的文件名）作为键，方便后续匹配：

// 可以把这段代码单独放在一个js文件（比如project-data.js）里，方便维护
const projectData = {
  photography: {
    title: "街头摄影作品集",
    year: "2023",
    concept: "通过镜头捕捉城市里被忽略的日常瞬间，用黑白影调强化情绪表达"
  },
  graphic-design: {
    title: "品牌视觉设计",
    year: "2022",
    concept: "为初创咖啡品牌打造兼具复古与现代感的视觉体系，传递温暖治愈的品牌调性"
  },
  // 其他项目按这个格式依次添加
};

2. 从URL提取项目标识 #

写个简单函数，从当前页面URL里拿到对应的项目ID：

function getProjectId() {
  // 获取页面路径，比如 "/projects/photography.html"
  const path = window.location.pathname;
  // 拆分路径取最后一段文件名，比如 "photography.html"
  const filename = path.split('/').pop();
  // 去掉.html后缀，得到项目ID：photography
  return filename.replace('.html', '');
}

如果你的URL用的是查询参数（比如 ?project=photography），可以把函数改成这样：

function getProjectId() {
  return new URLSearchParams(window.location.search).get('project');
}

3. 给模态框元素加标识 #

修改模态框的HTML结构，给需要替换的内容元素加ID，方便JS定位：

<div class="modal-content" id="content">
  <h2 id="modal-title"></h2>
  <p>年份：<span id="modal-year"></span></p>
  <p>创作理念：<span id="modal-concept"></span></p>
</div>

4. 填充模态框内容 #

写函数把对应项目的数据填充到模态框里：

function fillModalContent() {
  const projectId = getProjectId();
  const currentProject = projectData[projectId];

  // 如果找不到对应项目数据，显示默认内容或者直接返回
  if (!currentProject) {
    document.getElementById('modal-title').textContent = "暂无项目信息";
    return;
  }

  // 把数据填充到对应元素
  document.getElementById('modal-title').textContent = currentProject.title;
  document.getElementById('modal-year').textContent = currentProject.year;
  document.getElementById('modal-concept').textContent = currentProject.concept;
}

5. 绑定触发时机 #

在页面加载完成和点击按钮时调用填充函数，确保内容正确：

// 页面加载完成后先初始化内容
window.addEventListener('DOMContentLoaded', fillModalContent);

// 点击按钮打开模态框时，再确认一次内容（防止URL变化后没更新）
document.querySelector('button').addEventListener('click', function() {
  fillModalContent();
  // 这里加上你原来打开模态框的代码，比如：
  // document.querySelector('.modal').style.display = 'block';
});

额外提示 #

• 如果项目数量多，把数据单独放在一个JS文件里，和业务逻辑分开，维护起来更轻松。
• 可以给模态框设置默认内容，避免找不到项目数据时显示空白。

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