如何在不修改现有HTML的前提下实现图片点击弹出带半透明背景的大图模态窗口

嘿，你开头写的代码方向完全没问题！接下来咱们可以通过动态创建DOM元素的方式来实现模态窗口，完全不用改动现有HTML，具体可以这么补全你的代码：

const previewImages = document.querySelectorAll(".preview");

previewImages.forEach((previewImage) => {
  previewImage.addEventListener("click", (event) => {
    event.preventDefault();
    
    // 获取小图路径并替换为大图路径
    const imagePath = event.target.src;
    const bigImagePath = imagePath.replace("our_works", "our_works/big_img");
    
    // 1. 创建半透明全屏背景层
    const modalOverlay = document.createElement("div");
    modalOverlay.style.cssText = `
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.7);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1000;
      cursor: pointer;
    `;
    
    // 2. 创建大图元素，设置样式避免超出屏幕
    const bigImage = document.createElement("img");
    bigImage.src = bigImagePath;
    bigImage.alt = event.target.alt;
    bigImage.style.cssText = `
      max-width: 90%;
      max-height: 90%;
      border-radius: 8px;
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    `;
    
    // 3. 把大图嵌入背景层，再将整个模态框添加到页面
    modalOverlay.appendChild(bigImage);
    document.body.appendChild(modalOverlay);
    
    // 4. 点击背景层关闭模态框，清理DOM元素
    modalOverlay.addEventListener("click", () => {
      modalOverlay.remove();
    });
    
    // 可选优化：按ESC键也能关闭模态框
    const handleEscKey = (e) => {
      if (e.key === "Escape") {
        modalOverlay.remove();
        document.removeEventListener("keydown", handleEscKey);
      }
    };
    document.addEventListener("keydown", handleEscKey);
  });
});

代码说明： #

• 全程通过JS动态生成模态框的所有元素，完全不需要修改你现有的HTML结构
• 背景层用fixed定位覆盖整个屏幕，半透明黑色背景营造模态框的沉浸感，z-index设为1000确保它在页面所有元素之上
• 大图限制了最大宽高为90%视口，避免图片过大撑出屏幕，同时加了阴影和圆角提升视觉效果
• 支持两种关闭方式：点击背景层、按ESC键，关闭时直接移除模态框元素，避免DOM冗余
• 保留了你原有的路径替换逻辑，确保能正确加载对应的大图

备注：内容来源于stack exchange，提问作者aftab