点击不同图片在同页面弹出对应HTML内容并实现关闭按钮

需求说明 #

• 点击ID为myImg1至myImg4的图片，在同一窗口加载对应IDstyle1至style4的div内容
• style1至style4的div默认隐藏，仅通过弹窗展示
• 弹窗需添加关闭按钮功能

完整实现代码 #

HTML 部分

<!-- 图片链接区域 -->
<a href="style1.html" class="img-link" data-target="style1">
  <img id="myImg1" class="myImgClass1" src="images/1.jpg" alt="图片1">
</a>
<a href="style2.html" class="img-link" data-target="style2">
  <img id="myImg2" class="myImgClass2" src="images/2.jpg" alt="图片2">
</a>
<a href="style3.html" class="img-link" data-target="style3">
  <img id="myImg3" class="myImgClass3" src="images/3.jpg" alt="图片3">
</a>
<a href="style4.html" class="img-link" data-target="style4">
  <img id="myImg4" class="myImgClass4" src="images/4.jpg" alt="图片4">
</a>

<!-- 隐藏的内容区域 -->
<div id="style1" class="content-block">HTML CONTENT 1 HERE</div>
<div id="style2" class="content-block">HTML CONTENT 2 HERE</div>
<div id="style3" class="content-block">HTML CONTENT 3 HERE</div>
<div id="style4" class="content-block">HTML CONTENT 4 HERE</div>

<!-- 弹窗容器 -->
<div id="popup-container" class="popup-container">
  <div class="popup-content">
    <button id="close-popup" class="close-btn">×</button>
    <div id="popup-body"></div>
  </div>
</div>

CSS 部分

/* 隐藏默认内容块 */
.content-block {
  display: none;
}

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

/* 弹窗内容区域 */
.popup-content {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  position: relative;
  width: 80%;
  max-width: 600px;
}

/* 关闭按钮样式 */
.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  border: none;
  background: none;
  cursor: pointer;
  color: #666;
}

.close-btn:hover {
  color: #000;
}

JavaScript 部分

// 获取元素
const imgLinks = document.querySelectorAll('.img-link');
const popupContainer = document.getElementById('popup-container');
const popupBody = document.getElementById('popup-body');
const closeBtn = document.getElementById('close-popup');

// 绑定图片点击事件
imgLinks.forEach(link => {
  link.addEventListener('click', function(e) {
    // 阻止a标签默认跳转行为
    e.preventDefault();
    // 获取对应内容块的ID
    const targetId = this.dataset.target;
    const contentBlock = document.getElementById(targetId);
    // 将内容插入弹窗
    popupBody.innerHTML = contentBlock.innerHTML;
    // 显示弹窗
    popupContainer.style.display = 'flex';
  });
});

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

// 点击遮罩层关闭弹窗
popupContainer.addEventListener('click', function(e) {
  if (e.target === this) {
    this.style.display = 'none';
  }
});

关键说明 #

1. 使用data-target属性将图片链接与对应的内容块绑定，避免硬编码关联，更易维护
2. 通过CSS默认隐藏内容块和弹窗容器，点击时动态修改display属性控制显示
3. 阻止a标签的默认跳转行为，避免跳转到style1.html等页面
4. 添加了遮罩层点击关闭弹窗的额外交互，提升用户体验

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