Modals + Img Grid

assets/js/main.js

@@ -34,7 +34,44 @@
     },
   });
 
-  
+
+  // modals 
+  // openers
+  const body = document.querySelector("body");
+  const show_modal_buttons = document.querySelectorAll("[data-modal-show]");
+  show_modal_buttons.forEach((btn) => {
+    const target = btn.getAttribute('data-modal-show');
+    const modal = document.querySelector(`#${target}`);
+    if (modal) {
+      btn.addEventListener("click", (e) => {
+        modal.classList.toggle("hidden", false);
+        body.classList.toggle("overflow-hidden", true);
+      });
+    }
+  });
+
+  const hide_modal_buttons = document.querySelectorAll("[data-modal-hide]");
+  hide_modal_buttons.forEach((btn) => {
+    const target = btn.getAttribute('data-modal-hide');
+    const modal = document.querySelector(`#${target}`);
+    if (modal) {
+      btn.addEventListener("click", (e) => {
+        modal.classList.toggle("hidden", true);
+        body.classList.toggle("overflow-hidden", false);
+      });
+    }
+  });
+
+  const modal_bg = document.querySelectorAll(".modal-bg");
+  modal_bg.forEach((bg) => {
+    bg.addEventListener("click", (e) => {
+      if(e.target === bg) {
+        bg.classList.toggle("hidden", true);
+        body.classList.toggle("overflow-hidden", false);
+      }
+    });
+  });
+
   // Swipers
   // ----------------------------------------
   const swipers = document.querySelectorAll(".swiper-slider");

assets/scss/custom.scss

@@ -47,15 +47,27 @@
     text-decoration: underline;
 }
 
-.testimonial a {
+.testimonial a,
+.img_grid_container a {
     color: var(--meetups-color) !important;
     text-decoration: none;
 }
 
-.testimonial a:hover {
+.testimonial a:hover,
+.img_grid_container a:hover {
     text-decoration: underline;
 }
 
+.modal-bg a {
+    color: var(--meetups-color) !important;
+    text-decoration: none;
+}
+
+.modal-bg a:hover {
+    text-decoration: underline;
+}
+
+
 .video-container {
   aspect-ratio: 16 / 9;
   width: 100%;