如何为我上传的所有图像制作模态弹出按钮？

Question

我想为我的所有图像制作一个弹出模式按钮，但只有第一个有效，我知道我必须添加一些foreach代码，但我不知道如何。

<div id="myModal" class="modal">
    <span class="close">&times;</span>
    <img class="modal-content" id="img01">
</div>

<div class="gallery">
    <div class="containerPhotos">
        <?php
            require_once 'classes/dbh.php';
            if (isset($_GET['entry_id'])) {
                $entry_id = $_GET['entry_id'];
                $query = mysqli_query($conn, "SELECT * FROM images WHERE entry_id='$entry_id'");

                if ($query->num_rows > 0) {
                    while ($row = $query->fetch_assoc()) {
                        $dirname = 'uploads/' . $row["file_name"];

                        echo '<img class="photo" onclick="showImage(this)" id="myImg" src="' . $dirname . '" />';
                    }
                }
            }
        ?>
    </div>
</div>
    <script>
        var modal = document.getElementById('myModal');

        var img = document.getElementById('myImg');
        var modalImg = document.getElementById("img01");
        img.onclick = function () {
            modal.style.display = "block";
            modalImg.src = this.src;
        }

        var span = document.getElementsByClassName("close")[0];

        // When the user clicks on <span> (x), close the modal
        span.onclick = function () {
            modal.style.display = "none";
        }
    </script>

我希望使用foreach代码为所有人工作，但我不知道如何。

Answer 1

你需要实现showImage函数

  function showImage(el){
    var modal = document.getElementById('myModal');
    var modalImg = document.getElementById("img01");
    modalImg.src = el.src;
    modal.style.display = "block";
  }

使用引导框架。 它会帮助你开始