如何用JavaScript获取轮播图标题，点击打开模态框显示图片与标题

开发者阿泽

2026-6-30

解决轮播图点击后模态框显示对应标题和描述的问题

步骤1：修改模态框HTML，添加标题和描述容器

先给模态框补充标题和描述的占位元素，用于后续填充内容：

<!-- Modal -->
<div class="modal fade" id="gallery-modal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modal-title"></h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
         <img src="img/1.jpg" class="modal-img" alt="modal img">
         <p class="modal-description mt-3"></p>
      </div>
    </div>
  </div>
</div>

步骤2：修改JavaScript，获取并传递标题和描述

利用DOM的层级关系，点击图片时先定位到它所在的carousel-item容器，再从中提取对应标题和描述，最后赋值给模态框元素：

document.addEventListener("click", function(e) {
  if (e.target.classList.contains("d-block")) {
    // 设置模态框图片地址
    const src = e.target.getAttribute("src");
    document.querySelector(".modal-img").src = src;
    
    // 找到当前图片所属的轮播项容器
    const carouselItem = e.target.parentElement;
    // 提取标题和描述文本
    const captionTitle = carouselItem.querySelector(".carousel-caption h5").textContent;
    const captionDesc = carouselItem.querySelector(".carousel-caption p").textContent;
    
    // 将内容填充到模态框
    document.getElementById("modal-title").textContent = captionTitle;
    document.querySelector(".modal-description").textContent = captionDesc;
    
    // 显示模态框
    const myModal = new bootstrap.Modal(document.getElementById('gallery-modal'));
    myModal.show();
  }
});