fixed modals and prevented scroll when modal is open

Author: cssninja

src/js/libs/utils/utils.js

@@ -42,19 +42,44 @@ export function initModals() {
   let targets = document.querySelectorAll(".modal-trigger");
   if (typeof targets != "undefined" && targets != null) {
     for (var i = 0, len = targets.length; i < len; i++) {
-      targets[i].addEventListener('click',  function (event) {
-        var modalID = this.getAttribute('data-modal');
-        document.querySelector('#' + modalID).classList.add('is-active');
-      })
+      targets[i].addEventListener("click", function (event) {
+        console.log("click modal");
+        var modalID = this.getAttribute("data-modal");
+        document.querySelector("#" + modalID).classList.add("is-active");
+        const scrollY = document.documentElement.style.getPropertyValue(
+          "--scroll-y"
+        );
+        const body = document.body;
+        body.style.width = "100%";
+        body.style.paddingRight  = "15px";
+        body.style.position = "fixed";
+        
+        body.style.top = `-${scrollY}`;
+      });
     }
   }
 
-  targets = document.querySelectorAll(".modal-close");
+  targets = document.querySelectorAll(".modal-dismiss");
   if (typeof targets != "undefined" && targets != null) {
     for (var i = 0, len = targets.length; i < len; i++) {
-      targets[i].addEventListener('click',  function (event) {
-        this.closest('.modal').classList.remove('is-active');
-      })
+      targets[i].addEventListener("click", function (event) {
+        console.log("click modal close");
+        const body = document.body;
+        const scrollY = body.style.top;
+        body.style.position = "";
+        body.style.paddingRight  = "";
+        body.style.width = "";
+        body.style.top = "";
+        window.scrollTo(0, parseInt(scrollY || "0") * -1);
+        this.closest(".modal").classList.remove("is-active");
+      });
     }
   }
-}
+
+  window.addEventListener("scroll", () => {
+    document.documentElement.style.setProperty(
+      "--scroll-y",
+      `${window.scrollY}px`
+    );
+  });
+}

src/pages/index.html

@@ -418,7 +418,7 @@ <h3 class="subtitle is-5 is-muted">We'd love to hear from You</h3>
 
 
 <div id="auth-modal" class="modal">
-    <div class="modal-background"></div>
+    <div class="modal-background modal-dismiss"></div>
     <div class="modal-content">
         <div class="flex-card auth-card">
             <div class="tabs-wrapper">
@@ -447,7 +447,7 @@ <h3 class="subtitle is-5 is-muted">We'd love to hear from You</h3>
             </div>
         </div>
     </div>
-    <button class="modal-close is-large" aria-label="close"></button>
+    <button class="modal-close is-large modal-dismiss" aria-label="close"></button>
 </div>