实现点击信息按钮触发古迹详情弹窗（前端开发求助）

1. 调整HTML结构 #

给每个古迹卡片添加信息按钮和用于匹配JSON数据的data-id属性，同时添加弹窗容器：

<!-- 现有古迹卡片结构修改 -->
<div class="monument-card" data-id="1">
  <img src="monument1.jpg" alt="泰姬陵">
  <h3>阿格拉 - 泰姬陵</h3>
  <button class="book-btn">预订行程</button>
  <!-- 新增信息按钮 -->
  <button class="info-btn">ℹ️</button>
</div>

<!-- 新增弹窗容器，放在页面末尾 -->
<div class="modal">
  <div class="modal-content">
    <button class="close-btn">&times;</button>
    <h2 class="modal-title"></h2>
    <p class="modal-history"></p>
    <p class="modal-culture"></p>
    <!-- 可根据JSON字段添加更多内容 -->
  </div>
</div>

2. 编写CSS样式 #

实现按钮hover显示、弹窗的基础样式：

/* 卡片信息按钮默认隐藏，hover时显示 */
.monument-card {
  position: relative;
  /* 保留你原有的卡片样式 */
}
.info-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  display: none;
  border: none;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  cursor: pointer;
}
.monument-card:hover .info-btn {
  display: block;
}

/* 弹窗样式 */
.modal {
  display: none; /* 默认隐藏 */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5); /* 半透明背景 */
}
.modal-content {
  background-color: white;
  margin: 15% auto;
  padding: 20px;
  width: 80%;
  max-width: 600px;
  border-radius: 8px;
  position: relative;
}
.close-btn {
  position: absolute;
  right: 20px;
  top: 10px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  border: none;
  background: none;
}

3. 编写JavaScript逻辑 #

完成JSON数据加载、按钮点击事件绑定、弹窗内容填充与显示：

// 全局变量存储古迹数据
let monumentsData = [];

// 加载JSON数据
fetch('monuments.json')
  .then(response => response.json())
  .then(data => {
    monumentsData = data;
    // 数据加载完成后绑定点击事件
    bindInfoBtnEvents();
  })
  .catch(error => console.error('加载JSON失败:', error));

// 绑定信息按钮点击事件
function bindInfoBtnEvents() {
  const infoBtns = document.querySelectorAll('.info-btn');
  const modal = document.querySelector('.modal');
  const closeBtn = document.querySelector('.close-btn');
  const modalTitle = document.querySelector('.modal-title');
  const modalHistory = document.querySelector('.modal-history');
  const modalCulture = document.querySelector('.modal-culture');

  infoBtns.forEach(btn => {
    btn.addEventListener('click', function() {
      // 获取当前卡片的data-id
      const monumentId = parseInt(this.closest('.monument-card').dataset.id);
      // 从数据中找到对应古迹
      const monument = monumentsData.find(item => item.id === monumentId);
      
      if (monument) {
        // 填充弹窗内容
        modalTitle.textContent = `${monument.location} - ${monument.name}`;
        modalHistory.textContent = `历史背景: ${monument.history}`;
        modalCulture.textContent = `文化意义: ${monument.culture}`;
        // 显示弹窗
        modal.style.display = 'block';
      }
    });
  });

  // 关闭弹窗事件
  closeBtn.addEventListener('click', () => {
    modal.style.display = 'none';
  });

  // 点击弹窗外部关闭
  window.addEventListener('click', (e) => {
    if (e.target === modal) {
      modal.style.display = 'none';
    }
  });
}

4. monuments.json 数据格式参考 #

确保你的JSON数据包含匹配的字段：

[
  {
    "id": 1,
    "name": "泰姬陵",
    "location": "阿格拉",
    "history": "泰姬陵建于1631年，是莫卧儿皇帝沙贾汗为纪念妻子慕塔芝·玛哈而建...",
    "culture": "作为莫卧儿建筑的巅峰之作，泰姬陵融合了印度、波斯与伊斯兰建筑风格..."
  },
  {
    "id": 2,
    "name": "红堡",
    "location": "德里",
    "history": "红堡建于1638年，曾是莫卧儿帝国的皇宫...",
    "culture": "红堡的建筑体现了莫卧儿帝国鼎盛时期的工艺水平，是印度重要的文化遗产..."
  }
]

关键说明 #

• 用data-id关联卡片与JSON数据，确保点击按钮时能精准匹配到对应古迹的信息
• 弹窗采用固定定位+半透明背景，保证弹窗显示在页面最上层
• 关闭弹窗的逻辑包含点击关闭按钮和点击弹窗外部两种场景，提升用户体验

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