模态框关闭后对应图库图片消失，如何阻止该现象发生？

问题核心 #

你目前的实现是直接把原页面中的<img>元素移动到模态框容器中，而DOM元素在文档里只能存在一个位置，所以原页面的图片会被“挪走”；如果关闭模态框时没把它放回原位置，自然就从原页面消失了。

两种可行解决方案 #

方案1：复制图片元素而非直接移动

点击按钮时，创建原图片的副本插入模态框，原页面的图片位置不受任何影响。
示例代码：

// 按钮点击事件逻辑
document.querySelectorAll('.img-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    const targetImg = document.getElementById(this.dataset.imgId);
    // 创建图片副本（true表示复制子元素及属性）
    const imgCopy = targetImg.cloneNode(true);
    // 将副本插入模态框内容区
    document.getElementById('modal-content').appendChild(imgCopy);
    // 显示模态框
    document.getElementById('modal').style.display = 'block';
  });
});

// 关闭模态框逻辑
document.getElementById('close-modal').addEventListener('click', function() {
  const modal = document.getElementById('modal');
  const modalContent = document.getElementById('modal-content');
  modal.style.display = 'none';
  // 清空模态框内容，避免下次打开时残留旧图片
  modalContent.innerHTML = '';
});

方案2：关闭时将图片移回原位置

如果必须使用原图片（比如需要保留图片的状态或绑定的事件），则在打开模态框时记录原图片的父元素，关闭时再把图片放回原位置。
示例代码：

let originalParent = null;
let currentImg = null;

// 按钮点击事件逻辑
document.querySelectorAll('.img-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    currentImg = document.getElementById(this.dataset.imgId);
    originalParent = currentImg.parentNode;
    // 移动原图片到模态框
    document.getElementById('modal-content').appendChild(currentImg);
    document.getElementById('modal').style.display = 'block';
  });
});

// 关闭模态框逻辑
document.getElementById('close-modal').addEventListener('click', function() {
  const modal = document.getElementById('modal');
  modal.style.display = 'none';
  // 将图片移回原父元素
  if (currentImg && originalParent) {
    originalParent.appendChild(currentImg);
    // 清空引用，避免内存泄漏
    currentImg = null;
    originalParent = null;
  }
});

额外提示 #

• 方案1中，副本默认不会继承原图片通过addEventListener绑定的事件，若需要副本带事件，需在创建副本后重新绑定
• 确保模态框使用position: fixed或absolute脱离文档流，避免影响原页面布局

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