src/js/modals.js - master - engineunity_sub/doxml_work_site

src/js/modals.js
98 строк3 KB
PauloChaser
move content from branch dev to master
12 фев 2025, 18:06
12 фев 2025, 18:06a2e2735
// export function initModals() {
//
//     const modals = document.querySelectorAll('.modal');
//     const openModalLinks = document.querySelectorAll('.js-open-modal');
//     const closeModalButtons = document.querySelectorAll('.js-close-modal');
//
//
//     openModalLinks.forEach(link => {
//         console.log('clock');
//         link.addEventListener('click', openModal);
//     });
//
//     closeModalButtons.forEach(button => {
//         button.addEventListener('click', closeModalFunc);
//     });
//
//     window.addEventListener('click', (event) => {
//         if (event.target.classList.contains('modal')) {
//             closeModalFunc(event);
//         }
//     });
//
//     function openModal(event) {
//         event.preventDefault();
//         const target = event.currentTarget.getAttribute('href').substring(1);
//         const modal = document.getElementById(target);
//         if (modal) {
//             modal.style.display = 'flex';
//             history.pushState(null, null, `#${target}`);
//         }
//     }
//
//     function closeModalFunc(event) {
//         const modal = event.target.closest('.modal');
//         if (modal) {
//             modal.style.display = 'none';
//             history.pushState("", document.title, window.location.pathname);
//         }
//     }
//
//
// }

export async function loadModals() {
    console.log('1');
    try {
        const response = await fetch('/modals.html');
        if (!response.ok) throw new Error("Ошибка загрузки модалок");

        const modalsHTML = await response.text();
        document.body.insertAdjacentHTML('beforeend', modalsHTML);

        // Инициализация модалок после загрузки
        console.log('2');
        initModals();
    } catch (error) {
        console.error("Не удалось загрузить модалки:", error);
    }
}

export function initModals() {
    console.log('3');
    const modals = document.querySelectorAll('.modal');
    const openModalLinks = document.querySelectorAll('.js-open-modal');
    const closeModalButtons = document.querySelectorAll('.js-close-modal');

    openModalLinks.forEach(link => {
        link.addEventListener('click', openModal);
    });

    closeModalButtons.forEach(button => {
        button.addEventListener('click', closeModalFunc);
    });

    window.addEventListener('click', (event) => {
        if (event.target.classList.contains('modal')) {
            closeModalFunc(event);
        }
    });

    function openModal(event) {
        event.preventDefault();
        const target = event.currentTarget.getAttribute('href').substring(1);
        const modal = document.getElementById(target);
        if (modal) {
            modal.style.display = 'flex';
            history.pushState(null, null, `#${target}`);
        }
    }

    function closeModalFunc(event) {
        const modal = event.target.closest('.modal');
        if (modal) {
            modal.style.display = 'none';
            history.pushState("", document.title, window.location.pathname);
        }
    }
}