title: How to open a modal image for multiple images
body: <p>on w3schools site i found a tutorial for a dialog box/popup window. I would like to implement this with more images.</p>
  
  <p>my code:</p>
  
  <pre><code>&lt;img onclick="openModal()" src="low/dn-64.jpg" data-highres="high/dn-64.jpg" width="300" height="400"&gt;
  
  &lt;!-- Modal --&gt;
  &lt;div id="myModal" class="modal"&gt;
     &lt;!-- Close button --&gt;
     &lt;span class="close"&gt;&amp;times;&lt;/span&gt;
     &lt;!-- Modal content --&gt;
     &lt;img class="modal-content" id="modal-image"&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
     var modal = document.getElementById('myModal');
     var img = document.getElementById('myImg');
     var modalImg = document.getElementById('modal-image');
  
     function openModal() {
         modal.style.display = "block";
         modalImg.src = this.getAttribute("data-highres");
     }
  
     /*img.onclick = function() {
     modal.style.display = "block";
     modalImg.src = this.getAttribute("data-highres");
     }*/
  
     var span = document.getElementsByClassName("close")[0];
  
     span.onclick = function() {
     modal.style.display = "none";
     }
  
     window.onclick = function() {
     if(event.target == modal) {
          modal.style.display = "none";
        }
     }
  &lt;/script&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>  #myImg {
      cursor: zoom-in;
      transition: 0.3s;
    }
  
    #myImg:hover {
      opacity: 0.7;
    }
  
    .modal {
      display: none;
      position: fixed;
      z-index: 1;
      padding-top: 60px;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgb(0,0,0);
      background-color: rgba(0,0,0,0.8);
    }
  
    .modal-content {
      margin: auto;
      display: block;
      width: 80%;
      max-width: 700px;
    }
  
    .close {
      position: absolute;
      top: 15px;
      right: 35px;
      color: #f1f1f1;
      font-size: 50px;
      font-weight: bold;
      transition: 0.3s;
    }
  
    .close:hover,
    .close:focus {
      color: #bbbbbb;
      text-decoration: none;
      cursor: pointer;
    }
  </code></pre>
  
  <p>the code is working for one image. so i added a function openModal() and uncomment some part of the previous code. But now this isn't working even for one image it opens the modal without the image.</p>
  
  <p>thank you for your help   </p>