CODE EXAMPLE FOR JAVASCRIPT

popup javascript

const show_popup = () => {
    const popup = $(".popup");
    const popupItems = document.querySelectorAll(".popup__item");
    const popupWrap = $(".popup__wrap");
    const popupOverlay = $(".popup__overlay");
    const popupClose = $(".popup__close");
    const btnsPopup = $$(".btn_popup");
  
    btnsPopup.forEach((btn) => {
        btn.addEventListener(["click"], () => {
            showPopup(btn.getAttribute("data-popup"));
        });
    });
  
    const showPopup = (index) => {
        popupItems.forEach((popup) => {
            popup.classList.remove("show_data");
        });
        popup.style.display = "block !important";
        $(`.popup__item[data-popup="${index}"]`).classList.add("show_data");
        popupWrap.classList = `popup__wrap popup__wrap--${index}`;
        setTimeout(() => {
            popup.classList.add("show_data");
        }, 10);
    };
    const closePopup = () => {
        popup.classList.remove("show_data");
        setTimeout(() => {
            popup.style.display = "";
            popupWrap.classList = `popup__wrap`;
        }, 500);
    };

    popupOverlay.addEventListener("click", closePopup);
    popupClose.addEventListener("click", closePopup);

};
show_popup();