如何实现点击后让Lightbox画廊全屏覆盖显示？

核心是通过CSS固定定位实现全屏布局，配合JS控制显示/隐藏及交互细节，具体步骤如下：

一、基础CSS全屏布局设置 #

给画廊容器添加全屏样式，确保覆盖整个视口：

1. 最外层包裹容器（slide-show_containers）样式：

.slide-show_containers {
  position: fixed; /* 固定定位脱离文档流 */
  top: 0;
  left: 0;
  width: 100vw; /* 占满视口宽度 */
  height: 100vh; /* 占满视口高度 */
  background-color: rgba(0, 0, 0, 0.9); /* 半透明黑背景，突出画廊内容 */
  z-index: 9999; /* 设为极高层级，确保在所有内容上方 */
  display: none; /* 默认隐藏 */
}

2. 单个画廊容器（slide-show_{num}container）样式：

/* 替换为你实际的类名，或用通用类统一控制 */
.slide-show_1container, .slide-show_2container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center; /* 让内部图片居中显示 */
}

3. 画廊图片（image_slide{num}）样式：

.image_slide1, .image_slide2 {
  max-width: 90vw; /* 最大占视口宽度90%，避免贴边 */
  max-height: 90vh; /* 最大占视口高度90% */
  object-fit: contain; /* 保持图片比例，不拉伸变形 */
  display: none; /* 默认隐藏 */
}

二、JS逻辑调整与交互优化 #

基于你现有代码，补充以下细节：

1. 打开画廊时禁止页面背景滚动：
   在LaunchLightbox函数内添加一行，防止用户滚动页面干扰画廊查看：

function LaunchLightbox(num){
  // 保留你原有的代码...
  document.body.style.overflow = 'hidden'; // 新增：锁定背景滚动
  // 新增全局变量存储当前激活的画廊编号，用于后续关闭逻辑
  window.currentLightboxNum = num;
}

2. 关闭画廊时恢复页面滚动：
   在CloseLightbox函数内添加一行，恢复正常页面交互：

function CloseLightbox(num){
  // 保留你原有的代码...
  document.body.style.overflow = ''; // 新增：解锁背景滚动
}

3. 修复变量全局污染问题：
   将原有未声明的变量用let/const声明，避免全局作用域污染：

function LaunchLightbox(num){
  const lightboxcontainer = document.getElementsByClassName("slide-show_containers")[0];
  lightboxcontainer.style.display = "block";
  let counter = 0;
  const slides = document.getElementsByClassName("image_slide" + num.toString());
  const lightbox = document.getElementsByClassName("slide-show_" + num.toString() + "container")[0];
  lightbox.style.display = "block";
  slides[counter].style.display = "block";
  const totalimages = slides.length;
  document.body.style.overflow = 'hidden';
  window.currentLightboxNum = num;
  console.log(slides);
  console.log(totalimages);
}

三、可选交互增强（点击背景关闭画廊） #

给最外层容器添加点击事件，点击空白背景时自动关闭画廊：

document.addEventListener('DOMContentLoaded', function() {
  const lightboxContainer = document.getElementsByClassName("slide-show_containers")[0];
  lightboxContainer.addEventListener('click', function(e) {
    // 仅当点击的是容器本身（而非内部图片/按钮）时触发关闭
    if (e.target === this && window.currentLightboxNum) {
      CloseLightbox(window.currentLightboxNum);
    }
  });
});

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