Update index.html

index.html

@@ -121,8 +121,10 @@ <h1><b>PHOTOLIO</b></h1>
 </header>
 </div>
 
-<div id="enlargedImg">
-  <img id="displayimg" style="width:100%">
+<div id="myModal" class="modal">
+  <span class="close">&times;</span>
+  <img class="modal-content" id="enlargeimg">
+  <div id="caption"></div>
 </div>
 
 <!-- Photo Grid -->
@@ -176,27 +178,24 @@ <h1><b>PHOTOLIO</b></h1>
 var enlargeableImages = document.querySelectorAll('.enlargeable');
 
 // Loop through each image and attach the event handler
+var modal = document.getElementById("myModal");
+var modalImg = document.getElementById("enlargeimg");
+var captionText = document.getElementById("caption");
+
 enlargeableImages.forEach(function(img) {
   img.addEventListener('click', function() {
-    enlargeImage(img);
+    modal.style.display = "block";
+    modalImg.src = this.src;
+    captionText.innerHTML = this.alt;
   });
 });
 
-function enlargeImage(img) {
-  // Get the enlarged image container
-  var modal = document.getElementById('enlargedImg');
-
-  // Get the image inside the container
-  var modalImg = document.getElementById("displayimg");
-
-  // Display the enlarged image
-  modal.style.display = "block";
-  modalImg.src = img.src;
+// Get the <span> element that closes the modal
+var span = document.getElementsByClassName("close")[0];
 
-  // Close the modal when clicking outside the image
-  modal.onclick = function() {
-    modal.style.display = "none";
-  }
+// When the user clicks on <span> (x), close the modal
+span.onclick = function() { 
+  modal.style.display = "none";
 }
 
 </script>