var modals = document.getElementById("myModal");

 var images = document.querySelectorAll(".perfect");

 var modalImg = document.getElementById("img01");

 var captionText = document.getElementById("caption");

 

 images.forEach(function(elem) {

     elem.addEventListener("click", function() {

       modals.style.display = "block";

       modalImg.src = this.src;

       captionText.innerHTML = this.alt;

     });

 });

 

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

 

 // When the user clicks on <span> (x), close the modal

 span.onclick = function() { 

   modals.style.display = "none";

 }

// Get the modal

var modal = document.getElementById('myModal');



// Get the button that opens the modal

var btn = document.getElementById("myBtn");



// Get the <span> element that closes the modal

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



// When the user clicks the button, open the modal 

btn.onclick = function() {

    modal.style.display = "block";

}



// When the user clicks on <span> (x), close the modal

span.onclick = function() {

    modal.style.display = "none";

}



// When the user clicks anywhere outside of the modal, close it

window.onclick = function(event) {

    if (event.target == modal) {

        modal.style.display = "none";

    }

}