作品集HTML交互问题：点击图标后展示项目详情而非图片

• 正在制作申请用作品集，仅掌握HTML基础，现有代码交互逻辑不符合需求。
• 当前代码已实现：鼠标悬停图片时显示图标、项目名和短描述；但点击图标会通过data-lightbox打开图片并仅显示“Caption”标题。
• 想要的效果：点击图标后弹出包含项目详情及GitHub链接的文本框，而非打开图片。
• 尝试后遇到的问题：移除a标签的href和data-lightbox属性，搜索图标失去可悬停性；添加<p>标签时，文本要么显示在悬停层，要么点击后无法展示。想知道需修改当前代码还是其他位置来实现需求。

现有代码：

<div class="isotope-item">
  <figure class="snip1321">
    <img
      src="assets/images/portfolio-01.jpg"
      alt="sq-sample26"
    />
    <figcaption>
      <a
        href="assets/images/portfolio-01.jpg"
        data-lightbox="image-1"
        data-title="Caption"
        ><i class="fa fa-search"></i></a>
        <h4>FPS</h4>
      <span>Game Design</span>
    </figcaption>
  </figure>
</div>

1. 修改a标签保留可悬停性 #

不用删除href，把它设为#（空锚点），同时去掉data-lightbox和data-title属性，避免触发原有的图片预览逻辑，再加个自定义类名方便后续绑定事件：

<a href="#" class="project-detail-trigger"><i class="fa fa-search"></i></a>

2. 添加弹窗的HTML结构 #

在页面body末尾添加隐藏的弹窗结构，里面放项目详情和GitHub链接：

<div class="project-modal" style="display: none;">
  <div class="modal-content">
    <button class="close-modal">&times;</button>
    <h3>FPS 游戏设计项目</h3>
    <p>这是我设计的一款第一人称射击游戏，包含自定义武器系统和关卡逻辑，使用XX技术栈开发。</p>
    <a href="你的GitHub仓库地址">查看GitHub仓库</a>
  </div>
</div>

用display: none让弹窗默认隐藏。

3. 用原生JS实现点击弹窗逻辑 #

在body末尾添加这段脚本，实现点击显示/隐藏弹窗的功能：

// 获取元素
const trigger = document.querySelector('.project-detail-trigger');
const modal = document.querySelector('.project-modal');
const closeBtn = document.querySelector('.close-modal');

// 点击图标显示弹窗
trigger.addEventListener('click', function(e) {
  e.preventDefault(); // 阻止a标签默认跳转行为
  modal.style.display = 'flex';
});

// 点击关闭按钮隐藏弹窗
closeBtn.addEventListener('click', function() {
  modal.style.display = 'none';
});

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

4. 添加基础CSS美化弹窗 #

在页面的<style>标签里加这些样式，让弹窗更美观：

/* 弹窗背景遮罩 */
.project-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
}

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

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

/* 保持搜索图标的悬停效果 */
.project-detail-trigger {
  cursor: pointer;
  /* 可以保留原有的悬停样式，比如颜色变化 */
}

关键说明 #

• 保留href="#"是为了让浏览器识别它是可点击元素，从而保留悬停光标和可交互样式，再用e.preventDefault()阻止它跳转到页面顶部。
• 所有修改都可以直接加在现有页面里，不需要改动外部文件（如果你的snip1321类有自定义样式，确保弹窗样式不会冲突即可）。

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