如何修改JavaScript实现页面多Modal弹窗与对应项目关联？

第一步：修正项目按钮的HTML结构 #

首先，不能重复使用同一个ID（原代码里所有按钮都用了id="openmodal"，不符合HTML规范），我们改为用class标识按钮，并通过data-modal属性绑定对应的弹窗ID：

<div>
    <a class="open-modal-btn" data-modal="modal1">
       <p>Project 1</p>
    </a>
</div>

<div>
    <a class="open-modal-btn" data-modal="modal2">
        <p>Project 2</p>
    </a>
</div>

<div>
    <a class="open-modal-btn" data-modal="modal3">
        <p>Project 3</p>
    </a>
</div>

第二步：保持Modal结构（确保ID对应） #

你的Modal结构可以保留，只需保证每个Modal的ID和按钮的data-modal值一一对应即可，同时给每个图片滑块加唯一标识避免冲突：

<div id="modal1" class="modal">
   <div class="modal-content">
      <p>Project 1 Title</p>
      <div class="slideshow-container" data-slider-id="slider1">
      <img src="image1-1.jpg">
      <img src="image1-2.jpg">
      <img src="image1-3.jpg">
      <button class="prev" onclick="plusSlider('slider1', -1)">&#10094;</button>
      <button class="next" onclick="plusSlider('slider1', 1)">&#10095;</button>
      </div>
  </div>
</div>

<div id="modal2" class="modal">
   <div class="modal-content">
      <p>Project 2 Title</p>
      <div class="slideshow-container" data-slider-id="slider2">
      <img src="image2-1.jpg">
      <img src="image2-2.jpg">
      <img src="image2-3.jpg">
      <button class="prev" onclick="plusSlider('slider2', -1)">&#10094;</button>
      <button class="next" onclick="plusSlider('slider2', 1)">&#10095;</button>
      </div>
  </div>
</div> 

<div id="modal3" class="modal">
   <div class="modal-content">
      <p>Project 3 Title</p>
      <div class="slideshow-container" data-slider-id="slider3">
      <img src="image3-1.jpg">
      <img src="image3-2.jpg">
      <img src="image3-3.jpg">
      <button class="prev" onclick="plusSlider('slider3', -1)">&#10094;</button>
      <button class="next" onclick="plusSlider('slider3', 1)">&#10095;</button>
      </div>
  </div>
</div>

第三步：修改JavaScript实现多弹窗控制 #

用通用逻辑处理所有按钮和弹窗，无需为每个弹窗单独写代码，同时修复多图片滑块的冲突问题：

// 存储每个滑块的当前索引，避免多滑块互相干扰
const sliderStates = {
  slider1: 1,
  slider2: 1,
  slider3: 1
};

// 绑定所有弹窗打开按钮
const openButtons = document.querySelectorAll('.open-modal-btn');
openButtons.forEach(btn => {
  btn.addEventListener('click', function() {
    const modalId = this.getAttribute('data-modal');
    const modal = document.getElementById(modalId);
    modal.style.display = 'block';
    // 打开弹窗时重置对应滑块到第一张
    const sliderId = modal.querySelector('.slideshow-container').getAttribute('data-slider-id');
    sliderStates[sliderId] = 1;
    showSlide(sliderId, sliderStates[sliderId]);
  });
});

// 点击弹窗外部关闭弹窗
window.addEventListener('click', function(event) {
  if (event.target.classList.contains('modal')) {
    event.target.style.display = 'none';
  }
});

// 图片滑块切换逻辑
function plusSlider(sliderId, n) {
  sliderStates[sliderId] += n;
  showSlide(sliderId, sliderStates[sliderId]);
}

function showSlide(sliderId, n) {
  const slideList = document.querySelectorAll(`[data-slider-id="${sliderId}"] img`);
  const totalSlides = slideList.length;
  
  // 循环切换：超过最后一张回到第一张，少于第一张回到最后一张
  if (n > totalSlides) { sliderStates[sliderId] = 1; }
  if (n < 1) { sliderStates[sliderId] = totalSlides; }
  
  // 隐藏所有图片，显示当前索引的图片
  slideList.forEach(slide => slide.style.display = 'none');
  slideList[sliderStates[sliderId] - 1].style.display = 'block';
}

// 初始化所有滑块显示第一张图片
document.querySelectorAll('.slideshow-container').forEach(slider => {
  const sliderId = slider.getAttribute('data-slider-id');
  showSlide(sliderId, 1);
});

补充：必要的CSS基础样式 #

为了让弹窗和滑块正常显示，需要添加基础样式：

.modal {
  display: none; /* 默认隐藏弹窗 */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.8); /* 背景遮罩 */
}

.modal-content {
  background-color: #fefefe;
  margin: 10% auto;
  padding: 20px;
  width: 80%;
  max-width: 800px;
  position: relative;
}

.slideshow-container img {
  display: none; /* 默认隐藏所有图片 */
  width: 100%;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  background-color: rgba(0,0,0,0.5);
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

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