From 58a506a8a9c6585003cb58a07be6983b39801114 Mon Sep 17 00:00:00 2001
From: Allie Sadler <102604716+aevesdocker@users.noreply.github.com>
Date: Wed, 25 Jan 2023 15:06:06 +0000
Subject: [PATCH] modal fix (#16591)

---
 _includes/eula-modal.html  |  2 +-
 _includes/image-modal.html | 10 +++++-----
 _scss/_content.scss        | 14 +++++++-------
 assets/js/modal.js         | 10 +++++-----
 4 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/_includes/eula-modal.html b/_includes/eula-modal.html
index 3673066579..f00705cb2f 100644
--- a/_includes/eula-modal.html
+++ b/_includes/eula-modal.html
@@ -27,4 +27,4 @@
       </div>
     </div>
   </div>
-</div>
+</div> 
diff --git a/_includes/image-modal.html b/_includes/image-modal.html
index 2c47b8f76c..099bd3ce51 100644
--- a/_includes/image-modal.html
+++ b/_includes/image-modal.html
@@ -1,5 +1,5 @@
-<div id="img-modal" class="modal">
-  <span class="close" id="img-modal-close">&times;</span>
-    <img src="/" alt="/" class="modal-content" id="img-modal-img">
-    <div id="img-modal-caption"></div>
-  </div>
+<div id="img-modal1" class="modal1">
+  <span class="close1" id="img-modal-close1">&times;</span>
+    <img src="/" alt="/" class="modal-content1" id="img-modal-img1">
+    <div id="img-modal-caption1"></div>
+  </div> 
diff --git a/_scss/_content.scss b/_scss/_content.scss
index 58d0516b58..31d4fe889b 100755
--- a/_scss/_content.scss
+++ b/_scss/_content.scss
@@ -135,7 +135,7 @@ main img {
 main img:hover {opacity: 0.7;}
 
 /* The Modal (background) */
-.modal {
+.modal1 {
   display: none; /* Hidden by default */
   position: fixed; /* Stay in place */
   z-index: 1; /* Sit on top */
@@ -150,7 +150,7 @@ main img:hover {opacity: 0.7;}
 }
 
 /* Modal Content (Image) */
-.modal-content {
+.modal-content1 {
   margin: auto;
   display: block;
   width: 90%;
@@ -158,7 +158,7 @@ main img:hover {opacity: 0.7;}
 }
 
 /* Caption of Modal Image (Image Text) - Same Width as the Image */
-#img-modal-caption {
+#img-modal-caption1 {
   margin: 15px auto;
   display: block;
   width: 80%;
@@ -170,7 +170,7 @@ main img:hover {opacity: 0.7;}
 }
 
 /* Add Animation - Zoom in the Modal */
-.modal-content, #img-modal-caption {
+.modal-content1, #img-modal-caption1 {
   animation-name: zoom;
   animation-duration: 0.6s;
 }
@@ -181,7 +181,7 @@ main img:hover {opacity: 0.7;}
 }
 
 /* The Close Button */
-#img-modal-close {
+#img-modal-close1 {
   font-size: 40px;
   font-weight: bold;
   color: #f1f1f1;
@@ -189,8 +189,8 @@ main img:hover {opacity: 0.7;}
   margin-right: 10px;
 }
 
-#img-modal-close:hover,
-#img-modal-close:focus {
+#img-modal-close1:hover,
+#img-modal-close1:focus {
   color: #bbb;
   text-decoration: none;
   cursor: pointer;
diff --git a/assets/js/modal.js b/assets/js/modal.js
index eb17d152d9..33afd06066 100644
--- a/assets/js/modal.js
+++ b/assets/js/modal.js
@@ -1,10 +1,10 @@
 // Get the modal for image 1 
-var modal = document.getElementById("img-modal");
+var modal = document.getElementById("img-modal1");
 
 // Get the image and insert it inside the modal - use its "alt" text as a caption
 const images = document.querySelectorAll("main img");
-var modalImg = document.getElementById("img-modal-img");
-var captionText = document.getElementById("img-modal-caption");
+var modalImg = document.getElementById("img-modal-img1");
+var captionText = document.getElementById("img-modal-caption1");
 function handleImageClick(event) {
   modal.style.display = "block";
   modalImg.src = event.target.src;
@@ -16,7 +16,7 @@ images.forEach(image => image.addEventListener("click", handleImageClick))
 
 
 // Get the element that closes the modal
-var span = document.getElementById("img-modal-close");
+var span = document.getElementById("img-modal-close1");
 function handleModalClose(event) {
   if (event.type==="click"||event.key==="Escape"){
     modal.style.display = "none"
@@ -28,4 +28,4 @@ modal.addEventListener("click", handleModalClose)
 // When the user clicks on (x), close the modal
 span.onclick = function(){
   modal.style.display = "none";
-}
+}