Use modal

TyHil · Mar 12, 2024 · f655ab9 · f655ab9
1 parent 2fbbc4d
commit f655ab9
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 37 deletions.
diff --git a/src/index.html b/src/index.html
@@ -40,6 +40,7 @@
     <link href="/style-guide/inputs/style.css" rel="stylesheet" type="text/css" />
     <link href="/style-guide/inputs/featured/style.css" rel="stylesheet" type="text/css" />
     <link href="/style-guide/footer/style.css" rel="stylesheet" type="text/css" />
+    <link href="/style-guide/modal/style.css" rel="stylesheet" type="text/css" />
     <link href="/style.css" rel="stylesheet" type="text/css" />
   </head>
 
@@ -1993,13 +1994,14 @@ <h2>Testimonials</h2>
       </div>
     </footer>
 
-    <div id="fullscreenbg">
-      <img id="fullscreenimg" loading="lazy" />
+    <div id="fullscreenbg" class="modalBg out">
+      <img id="fullscreenimg" class="modal" />
     </div>
 
     <script src="https://www.gstatic.com/firebasejs/10.1.0/firebase-app-compat.js"></script>
     <script src="https://www.gstatic.com/firebasejs/10.1.0/firebase-analytics-compat.js"></script>
     <script src="/style-guide/script.js"></script>
+    <script src="/style-guide/modal/script.js"></script>
     <script src="/script.js"></script>
   </body>
 </html>
diff --git a/src/script.js b/src/script.js
@@ -270,12 +270,7 @@ function openFullscreen(src, alt) {
   let fullscreenimg = document.getElementById('fullscreenimg');
   fullscreenimg.src = src;
   fullscreenimg.alt = alt;
-  document.body.style.marginRight = window.innerWidth - document.documentElement.clientWidth + 'px';
-  document.body.classList.add('disableScroll');
-  fullscreenbg.style.display = 'flex';
-  setTimeout(function () {
-    fullscreenbg.classList.add('show');
-  });
+  openModal(fullscreenbg)
 }
 
 const images = document.querySelectorAll('.cards img');
@@ -286,16 +281,7 @@ for (let i = 0; i < images.length; i++) {
 }
 
 function closeFullscreen() {
-  fullscreenbg.classList.remove('show');
-  fullscreenbg.addEventListener(
-    'transitionend',
-    function () {
-      this.style.display = 'none';
-    },
-    { once: true }
-  );
-  document.body.style.marginRight = 0;
-  document.body.classList.remove('disableScroll');
+  closeModal(fullscreenbg);
 }
 
 fullscreenbg.addEventListener('click', function () {

diff --git a/src/style.css b/src/style.css
@@ -565,33 +565,16 @@ a.button.large.circle.replit {
 /* Fullscreen Images */
 
 #fullscreenbg {
-  z-index: 1;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: none;
-  justify-content: center;
-  transition:
-    backdrop-filter 200ms,
-    background-color 200ms;
   cursor: zoom-out;
 }
-#fullscreenbg.show {
-  -webkit-backdrop-filter: blur(0.1rem);
-  backdrop-filter: blur(0.1rem);
-  background-color: rgba(0, 0, 0, 0.8);
-}
 #fullscreenimg {
   width: 100%;
   height: auto;
   -o-object-fit: contain;
   object-fit: contain;
-  opacity: 0;
-  transition: opacity 200ms;
+  transition: opacity 2000ms;
 }
-#fullscreenbg.show #fullscreenimg {
+#fullscreenbg:not(.out) #fullscreenimg {
   opacity: 1;
 }