javascript - How to make a modal popup button for all the images I have uploaded?


I want to make a popup modal button for all my images, but only the first works and I know that I have to add someforeach code, but I don't know how.

<div id="myModal" >
  <span >&times;</span>
  <img id="img01">

<div >
  <div >
      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 onclick="showImage(this)" id="myImg" src="' . $dirname . '" />';
    var modal = document.getElementById('myModal');

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

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

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

I expect to work for all with aforeach code, but I don't know how.




You need to implement the showImage function

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

Use the bootstrap framework. It will help you to start

People are also looking for solutions to the problem: php - General CURL and Order of operations


Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.