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");