如何实现点击图库图片弹出对应目标图片的模态框？

你猜的没错，问题的核心有两个：一是你在循环里重复创建了多个相同id的模态框（id="myModal"），而DOM中id是唯一的，所以JS只会获取到最后一个模态框；二是每个模态框里的图片src在循环结束后都会被最后一行的图片覆盖，自然点击任何图片都只会显示最后一张。

下面是具体的修改方案，我们可以复用一个模态框，动态切换里面的图片：

第一步：修改PHP/HTML代码 #

把模态框移到循环外面（只创建一次），同时给每个图片按钮添加一个data属性来存储对应的原图地址：

<?php
$sql = "SELECT * FROM gallery ORDER BY idGallery DESC;";
$stmt = mysqli_stmt_init($conn);
if(!mysqli_stmt_prepare($stmt, $sql)) {
    echo "SQL statement failed";
} else {
    mysqli_stmt_execute($stmt);
    $result = mysqli_stmt_get_result($stmt);
    // 先循环生成所有图片按钮
    while ($row = mysqli_fetch_assoc($result)) {
        echo ' 
        <a href="#" class="myBtn" data-img-src="img/gallery/'.$row["imgFullNameGallery"].'"> 
            <div class="myImg" style="background-image: url(img/gallery/'.$row["imgFullNameGallery"].');"></div> 
        </a> 
        ';
    }
    // 循环结束后，只创建一个模态框
    echo '
    <!-- The Modal --> 
    <div id="myModal" class="modal"> 
        <!-- Modal content --> 
        <div class="modal-content"> 
            <span class="close">&times;</span> 
            <img id="modalImg" src="" alt="Full size image"> 
        </div> 
    </div>
    ';
}
?>

第二步：修改JavaScript代码 #

现在我们只需要操作唯一的模态框，点击按钮时把对应图片的地址赋值给模态框里的img元素，再显示模态框：

// 获取唯一的模态框、关闭按钮和模态框里的图片元素
const modal = document.getElementById('myModal');
const modalImg = document.getElementById('modalImg');
const closeBtn = document.getElementsByClassName("close")[0];
const btns = document.getElementsByClassName("myBtn");

// 给每个图片按钮绑定点击事件
for (let i = 0; i < btns.length; i++) {
    btns[i].onclick = function(evt) {
        evt.preventDefault(); // 阻止a标签默认跳转行为
        // 从data属性中拿到对应的原图地址
        const imgSrc = this.getAttribute('data-img-src');
        // 赋值给模态框里的图片
        modalImg.src = imgSrc;
        // 显示模态框
        modal.style.display = "block";
    }
}

// 关闭模态框的逻辑
closeBtn.onclick = function() {
    modal.style.display = "none";
}

// 点击模态框外部关闭
window.onclick = function(event) {
    if (event.target === modal) {
        modal.style.display = "none";
    }
}

为什么这样改？ #

1. 复用模态框：避免了重复创建相同id的元素，DOM结构更简洁，性能也更好。
2. data属性存储图片地址：把每个按钮对应的原图地址存在自身的data属性里，点击时直接读取，就能精准对应到被点击的图片。
3. 动态修改src：通过JS动态更新模态框里图片的src，实现点击不同按钮显示不同图片的效果。

这样修改后，你点击任意图片，模态框就会显示对应的原图了～

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