https://khshield.com/template/js/module/PopupModule.js

1export default function PopupModule() {
2    const popupClose = document.querySelectorAll(".popup-close");
3    const popupOverlay = document.querySelectorAll(".popup-overlay");
4    const body = document.getElementsByTagName("body")[0];
5    const popup = document.querySelectorAll(".popup");
6   
7   
8    if (popupClose) {
9        popupClose.forEach((item) => {
10            item.addEventListener("click", () => {
11                popup.forEach((item) => {
12                    item.classList.remove("open");
13                    body.classList.remove("no-scroll");
14                });
15            });
16        });
17        document.addEventListener('click', (e) => {
18            if(e.target.closest(".popup-close")){
19                popup.forEach((item) => {
20                    item.classList.remove("open");
21                    body.classList.remove("no-scroll");
22                });
23            }
24        })
25    }
26    if (popupOverlay) {
27        popupOverlay.forEach((item) => {
28            item.addEventListener("click", () => {
29                popup.forEach((item) => {
30                    item.classList.remove("open");
31                    body.classList.remove("no-scroll");
32                });
33            });
34        });
35    }
36
37    const popupOpens = document.querySelectorAll(".popup-open");
38    if (popupOpens) {
39        popupOpens.forEach((item) => {
40            item.addEventListener("click", (e) => {
41                e.preventDefault();
42                const idString = item.getAttribute("data-popup");
43                if (popup) {
44                    popup.forEach((item) => {
45                        if (item.getAttribute("data-popup-id") == idString) {
46                            item.classList.add("open");
47                            body.classList.add("no-scroll");
48                        }
49                    });
50                }
51            });
52        });
53    }
54
55    const popupstyle = document.querySelector(".popup.style-second");
56    const popupsecond = document.querySelector(".all-projects-content");
57    if(popupsecond) {
58        const btnItem = document.querySelectorAll(".all-projects-item");
59        btnItem.forEach((item) => {
60            const showpopup = item.querySelector(".all-projects-detail");
61            showpopup.addEventListener('click', (e) => {
62                e.preventDefault();
63                popupstyle.classList.add("open")
64            })
65        })
66    }
67
68    const popupdown = document.querySelector('.popup-download')
69    const mainpopupdown = document.querySelector('.popup-download')
70    if(popupdown) {
71        const icondown = document.querySelectorAll('.discover-item')
72        icondown.forEach((item) => {
73            const icon = item.querySelector('.download')
74            icon.addEventListener('click', () => {
75                mainpopupdown.classList.add('open')
76            })
77        })
78    }
79
80}