如何用HTML和CSS实现点击图片弹出简易信息弹窗？

这里用CSS的:target伪类就能实现纯静态的弹窗效果，不需要额外JavaScript，适配你的现有代码：

第一步：修改HTML结构 #

给图片添加锚点链接，并增加弹窗的HTML容器：

<div class="d-flex shop-card">
  <a href="#product-modal" class="card-img-link">
    <img
      class="card-img shop-card"
      src="images/shirt.png"
      alt="shirt"
    />
  </a>
</div>

<!-- 弹窗容器 -->
<div id="product-modal" class="modal">
  <div class="modal-content">
    <a href="#" class="modal-close">&times;</a>
    <h3>商品详情</h3>
    <p>这是一件纯棉T恤，亲肤透气，多色可选。</p>
    <img src="images/shirt-detail.png" alt="shirt detail" style="width:100%;" />
  </div>
</div>

第二步：添加CSS样式 #

通过控制:target状态来显示/隐藏弹窗：

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

/* 当锚点指向弹窗时，显示弹窗 */
.modal:target {
  display: flex;
}

/* 弹窗内容区域样式 */
.modal-content {
  background: #fff;
  padding: 2rem;
  border-radius: 8px;
  position: relative;
  max-width: 500px;
  width: 90%;
  box-sizing: border-box;
}

/* 关闭按钮样式 */
.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 2rem;
  text-decoration: none;
  color: #333;
}

.modal-close:hover {
  color: #e74c3c;
}

/* 给产品图片添加点击提示 */
.shop-card {
  cursor: pointer;
}

原理说明 #

• 点击图片时，锚点跳转到#product-modal，触发.modal:target状态，弹窗从隐藏变为显示。
• 点击关闭按钮（指向#）会清除锚点，弹窗回到隐藏状态。
• 这个方案完全基于HTML和CSS，适合实现简易的商品详情弹窗，如果你需要更复杂的交互（比如点击遮罩关闭），可以再补充少量JavaScript，但这个基础版本足够满足简易需求。

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