点击图片动态更新Modal模态框内容的实现方案咨询

• 混淆了服务端与客户端执行逻辑：PHP是服务端语言，页面输出到浏览器前就已执行完毕，用户点击图片属于浏览器端交互，无法再触发PHP变量更新，你写在onclick里的PHP代码在页面加载时就已经执行完成，完全不会响应用户的点击操作
• PHP判断逻辑存在语法错误：if ($img = 2) 是赋值操作不是等值判断，哪怕逻辑能正常运行也会直接把$img赋值为2，永远只会走第一个分支
• JS逻辑与DOM结构不匹配：代码中获取了modalImg = document.getElementById("img01")，但你的模态框DOM中不存在id为img01的元素，这段逻辑完全无效
• 可扩展性差：每新增一个项目就要手动新增一个img变量绑定点击事件，后续维护成本很高

仅需要修改少量内容即可实现需求，不需要创建多个模态框，后续新增项目也不需要额外修改JS逻辑：

第一步：修改图片HTML部分，添加自定义属性存储对应数据 #

给所有项目图片增加统一的类名project-img，同时用自定义属性存储每个项目对应的模态框标题、iframe路径，删除原有无效的onclick PHP代码：

<div id="projects">
    <h2>Projects</h2>
    <h5>Here Some mind blowing project made by pupils of our school Caleb British International school.
      <br>
    Click on the image to access<br>
  </h5>
    <h4>A Basic Calculator by Adachukwu Ezechukwu</h4>
    
    <img class="project-img" src="images/ae-calc.png" alt="A Basic Calculator by Adachukwu Ezechukwu" 
         data-modal-title="A Basic Calculator" 
         data-iframe-src="calculatorapp/index.php">
    <br>
    <br>
    <h4>A Simple Calendar by Adachukwu Ezechukwu</h4>
    
    <img class="project-img" src="images/ae-mdc.png" alt="A Simple Calendar by Adachukwu Ezechukwu"
         data-modal-title="A Simple Calendar"
         data-iframe-src="mdc/index.php">
    
</div>

第二步：修改模态框HTML部分，删除原有PHP判断逻辑 #

给模态框的标题、iframe增加id标识，内容留空由JS动态赋值即可：

<!-- The Modal -->
<div id="myModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h2 id="modal-title"></h2>
    </div>
    <div class="modal-body">
      <iframe id="modal-iframe" src="" width="100%" height="350px"></iframe>
    </div>
  </div>
</div>

第三步：修改JS逻辑，统一绑定点击事件 #

不需要逐个给图片绑定点击事件，统一给所有带project-img类的图片绑定事件即可：

var modal = document.getElementById("myModal");
var modalTitle = document.getElementById("modal-title");
var modalIframe = document.getElementById("modal-iframe");
var closeBtn = document.getElementsByClassName("close")[0];

// 统一绑定所有项目图片的点击事件
document.querySelectorAll('.project-img').forEach(img => {
  img.onclick = function() {
    // 读取图片自定义属性更新模态框内容
    modalTitle.textContent = this.dataset.modalTitle;
    modalIframe.src = this.dataset.iframeSrc;
    modal.style.display = "block";
  }
});

// 关闭模态框逻辑
closeBtn.onclick = function() {
  modal.style.display = "none";
  // 关闭时清空iframe地址，避免项目在后台继续运行
  modalIframe.src = "";
}

// 可选：点击模态框外部区域也触发关闭
window.onclick = function(event) {
  if (event.target == modal) {
    closeBtn.click();
  }
}

后续新增项目只需要复制图片的HTML结构，修改对应的src、alt、data-modal-title、data-iframe-src三个属性即可，不需要修改其他代码，维护成本极低。

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