如何在Bootstrap 4 Lightbox中添加图片点击后的弹窗文本内容

步骤1：给图片链接添加自定义文本属性 #

在每个触发lightbox的<a>标签上添加data-caption属性，填入对应图片的说明文本：

<div class="row photos">
  <div class="col-sm-6 col-md-4 col-lg-3 item">
    <a href="https://i.imgur.com/zmzERpe.jpg" data-lightbox="photos" data-caption="这是第一张图片的描述内容">
      <img class="img-fluid" src="https://i.imgur.com/zmzERpe.jpg">
    </a>
  </div>
      
  <div class="col-sm-6 col-md-4 col-lg-3 item">
     <a href="https://i.imgur.com/gX11Vt5.jpg" data-lightbox="photos" data-caption="第二张图片的详细说明">
       <img class="img-fluid" src="https://i.imgur.com/gX11Vt5.jpg">
     </a>
  </div>
</div>

步骤2：在Lightbox弹窗中添加文本容器 #

找到你的lightbox模态框结构，新增一个用于展示文本的容器：

<!-- 示例模态框结构，添加.caption容器 -->
<div class="lightbox-modal fade" id="lightbox-modal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <img id="lightbox-image" class="img-fluid" src="" alt="">
        <!-- 新增文本显示容器 -->
        <div id="lightbox-caption" class="mt-3 text-center text-muted"></div>
      </div>
    </div>
  </div>
</div>

步骤3：修改JavaScript逻辑读取并渲染文本 #

更新控制lightbox弹出的JS代码，读取data-caption内容并插入到弹窗容器：

// 监听lightbox链接点击事件
$('[data-lightbox="photos"]').click(function(e) {
  e.preventDefault();
  const imgSrc = $(this).attr('href');
  const captionText = $(this).data('caption') || '';
  
  // 赋值图片和文本
  $('#lightbox-image').attr('src', imgSrc);
  $('#lightbox-caption').text(captionText);
  
  // 打开模态框
  $('#lightbox-modal').modal('show');
});

// 若有切换按钮，同步更新文本（按需调整）
$('.lightbox-prev').click(function() {
  const currentItem = $('.photos .item.active');
  const prevItem = currentItem.prev('.item');
  if(prevItem.length) {
    const caption = prevItem.find('[data-lightbox="photos"]').data('caption');
    $('#lightbox-caption').text(caption || '');
  }
});

$('.lightbox-next').click(function() {
  const currentItem = $('.photos .item.active');
  const nextItem = currentItem.next('.item');
  if(nextItem.length) {
    const caption = nextItem.find('[data-lightbox="photos"]').data('caption');
    $('#lightbox-caption').text(caption || '');
  }
});

步骤4：可选样式优化 #

给文本容器添加基础样式提升显示效果：

#lightbox-caption {
  font-size: 1rem;
  line-height: 1.5;
  max-width: 80%;
  margin: 0 auto;
}

核心逻辑是通过data-*属性存储每张图片的自定义文本，再借助JavaScript读取内容并渲染到弹窗的指定容器中，适配原有的lightbox交互逻辑。

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