点击图片链接后，如何让Lightbox2显示在Bootstrap模态框之上？

这个问题我之前做项目时也踩过坑，本质就是z-index层级冲突——Bootstrap模态框的默认z-index比Lightbox2的要高，导致Lightbox被压在了模态框下面。调整一下层级就能轻松解决，具体方法如下：

• 调整Lightbox的z-index值
  Bootstrap模态框的.modal默认z-index是1050，对应的遮罩层.modal-backdrop是1040。我们只需要把Lightbox的核心元素z-index设得比1050高就行。你可以在自定义CSS文件里添加这段代码（推荐不要直接修改插件原CSS，避免后续更新丢失修改）：

  /* 覆盖Lightbox的遮罩层层级 */
  .lightboxOverlay {
    z-index: 1060 !important;
  }
  
  /* 确保Lightbox图片容器本身也在最上层 */
  .lightbox {
    z-index: 1061 !important;
  }
  

  这里用!important是为了确保自定义样式能覆盖插件原有的样式优先级，如果你能保证自定义CSS加载在Lightbox和Bootstrap的CSS之后，也可以去掉!important。

• 验证效果
  保存修改后刷新页面，点击模态框里的图片链接，Lightbox应该就能正常显示在模态框上方了。如果还是有问题，检查一下页面里有没有其他元素设置了更高的z-index，或者有没有自定义样式干扰了层级。

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