JavaScript多模态框技术咨询：新手如何实现2-3个不同模态框用于画廊预览

嘿，作为JS新手能写出单个模态框已经很棒了！要实现画廊需要的多个模态框，咱们不用重复写多份代码，用统一逻辑+元素关联的方式就能轻松搞定，下面是具体的实现方案：

首先把画廊按钮和对应的模态框改成统一的类名，同时用data-modal-target属性把按钮和它要触发的模态框绑定起来，这样不用给每个元素都写唯一ID：

<!-- 画廊预览按钮 -->
<button class="gallery-preview-btn" data-modal-target="#gallery-modal-1">查看风景图1</button>
<button class="gallery-preview-btn" data-modal-target="#gallery-modal-2">查看风景图2</button>
<button class="gallery-preview-btn" data-modal-target="#gallery-modal-3">查看风景图3</button>

<!-- 对应三个模态框 -->
<div class="gallery-modal" id="gallery-modal-1">
  <div class="modal-inner">
    <span class="modal-close-btn">&times;</span>
    <img src="your-image-1.jpg" alt="风景图1">
  </div>
</div>

<div class="gallery-modal" id="gallery-modal-2">
  <div class="modal-inner">
    <span class="modal-close-btn">&times;</span>
    <img src="your-image-2.jpg" alt="风景图2">
  </div>
</div>

<div class="gallery-modal" id="gallery-modal-3">
  <div class="modal-inner">
    <span class="modal-close-btn">&times;</span>
    <img src="your-image-3.jpg" alt="风景图3">
  </div>
</div>

原来的代码是针对单个模态框写的，现在我们改成批量绑定事件，用通用函数处理所有模态框的打开和关闭：

// 获取所有相关元素
const previewBtns = document.querySelectorAll('.gallery-preview-btn');
const closeBtns = document.querySelectorAll('.modal-close-btn');
const allModals = document.querySelectorAll('.gallery-modal');

// 打开模态框的通用函数
function openGalleryModal(event) {
  // 从按钮的自定义属性里拿到对应模态框的选择器
  const targetModalSelector = event.target.getAttribute('data-modal-target');
  const targetModal = document.querySelector(targetModalSelector);
  targetModal.style.display = 'block';
}

// 关闭模态框的通用函数
function closeGalleryModal(event) {
  // 找到当前关闭按钮所在的模态框（用closest方法快速定位父级）
  const currentModal = event.target.closest('.gallery-modal');
  currentModal.style.display = 'none';
}

// 点击模态框外部关闭的函数
function closeOnOutsideClick(event) {
  // 如果点击的是模态框的遮罩层（最外层div），就关闭它
  if (event.target.classList.contains('gallery-modal')) {
    event.target.style.display = 'none';
  }
}

// 给所有预览按钮绑定打开事件
previewBtns.forEach(btn => {
  btn.addEventListener('click', openGalleryModal);
});

// 给所有关闭按钮绑定关闭事件
closeBtns.forEach(btn => {
  btn.addEventListener('click', closeGalleryModal);
});

// 给窗口绑定外部点击关闭事件
window.addEventListener('click', closeOnOutsideClick);

别忘了加上模态框的基础样式，确保遮罩层、内容区和关闭按钮正常工作：

/* 模态框遮罩层 */
.gallery-modal {
  display: none; /* 默认隐藏 */
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* 半透明黑色背景 */
}

/* 模态框内容区 */
.modal-inner {
  position: relative;
  margin: 8% auto;
  width: 90%;
  max-width: 800px;
  background-color: #fff;
  padding: 15px;
}

/* 关闭按钮 */
.modal-close-btn {
  color: #666;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.2s;
}

.modal-close-btn:hover,
.modal-close-btn:focus {
  color: #000;
  text-decoration: none;
}

/* 画廊图片样式 */
.modal-inner img {
  width: 100%;
  height: auto;
  display: block;
}

关键优势说明： #

• 扩展性强：以后要加更多画廊模态框，只需要复制HTML结构，修改data-modal-target和图片地址就行，不用改JS代码
• 代码简洁：用统一的函数处理所有模态框的逻辑，避免重复写多份相同的事件绑定
• 容错性高：用closest()方法定位模态框，不用依赖严格的DOM层级，结构调整更灵活

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