轮播图点击弹出带说明文字图片的实现方案咨询

原生零依赖实现（适配现有代码） #

直接基于你现有代码修改，不需要引入额外第三方资源，改动量小，原有轮播逻辑、hover显示文字、视频跳转功能完全不受影响：

第一步：修改HTML结构 #

1. 给所有非视频类的.tile元素添加data-img（存大图地址，缩略图和大图一致的话直接复用现有img的src即可）、data-desc（存对应说明文字）属性
2. 在页面底部新增全局弹窗DOM结构
   修改后的完整HTML参考：

<div class="container">
    <div class="blog--slider-wrap blog--slider-main common-slider">
    
      <div class="blog-box">
           <!-- 新增data属性存储弹窗需要的信息 -->
           <div class="tile" data-img="images/image-1.jpg" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"> 
             <img src="images/image-1.jpg">
               <div class="text">
                     <p class="animate-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
                   </div>
                 </div>
              </div>
              
      <div class="blog-box">
           <a class="popup-youtube" href="https://www.youtube.com">
           <img src="images/play-button.png" class="video-gallery">
           </a>
           <div class="tile"> 
             <img src="images/image-2.jpg">
                 </div>
              </div>
              
         <div class="blog-box">
           <!-- 新增data属性存储弹窗需要的信息 -->
           <div class="tile" data-img="images/image-3.jpg" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"> 
             <img src="images/image-3.jpg">
               <div class="text">
                     <p class="animate-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
                   </div>
                 </div>
              </div>
         <div class="blog-box">
           <a class="popup-youtube" href="https://www.youtube.com">
           <img src="images/play-button.png" class="video-gallery">
           </a>
           <div class="tile"> 
             <img src="images/image-4.jpg">
                 </div>
              </div>
              </div>
</div>

<!-- 新增弹窗结构 -->
<div class="img-modal" id="imgModal">
  <div class="modal-close" id="modalClose">×</div>
  <img class="modal-img" id="modalImg" src="" alt="">
  <p class="modal-desc" id="modalDesc"></p>
</div>

第二步：新增弹窗CSS样式 #

把下面代码加到你现有CSS末尾即可：

/* 弹窗样式 */
.img-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0,0,0,0.85);
  z-index: 9999;
  padding: 50px 20px;
  box-sizing: border-box;
  text-align: center;
}
.modal-close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}
.modal-close:hover {
  color: #ccc;
}
.modal-img {
  max-width: 90%;
  max-height: 75vh;
  margin: 0 auto;
  display: block;
}
.modal-desc {
  margin-top: 20px;
  color: #fff;
  font-size: 16px;
  line-height: 1.5;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

第三步：新增JS交互逻辑 #

把下面代码放到页面底部的script标签内即可：

// 获取DOM元素
const tiles = document.querySelectorAll('.tile');
const imgModal = document.getElementById('imgModal');
const modalImg = document.getElementById('modalImg');
const modalDesc = document.getElementById('modalDesc');
const modalClose = document.getElementById('modalClose');

// 绑定tile点击事件
tiles.forEach(tile => {
  // 跳过带视频弹窗的tile，保留原有视频跳转功能
  if (tile.parentElement.querySelector('.popup-youtube')) return;
  tile.addEventListener('click', function() {
    const imgSrc = this.getAttribute('data-img');
    const desc = this.getAttribute('data-desc');
    modalImg.src = imgSrc;
    modalDesc.innerText = desc;
    imgModal.style.display = 'block';
    // 弹出弹窗时禁止背景滚动
    document.body.style.overflow = 'hidden';
  })
})

// 点击关闭按钮关闭弹窗
modalClose.addEventListener('click', function() {
  imgModal.style.display = 'none';
  document.body.style.overflow = 'auto';
})

// 点击遮罩区域关闭弹窗
imgModal.addEventListener('click', function(e) {
  if (e.target === imgModal) {
    imgModal.style.display = 'none';
    document.body.style.overflow = 'auto';
  }
})

现成组合方案说明 #

如果不想手写弹窗逻辑，可以直接用轻量灯箱组件和你现有的3图展示轮播框架搭配，只要给轮播的图片项添加对应灯箱组件要求的属性即可，不需要改动原有轮播的展示逻辑，适配成本很低。

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