관리-도구

편집 파일: modal.js

"use strict";
document.addEventListener("DOMContentLoaded", () => {
    const openModalButtons = document.querySelectorAll("[data-modal-id]");
    const closeModalButtons = document.querySelectorAll(".close-modal-btn");

openModalButtons.forEach((button) => {
        button.addEventListener("click", () => {
            const modalId = button.getAttribute("data-modal-id");
            const modal = document.getElementById(modalId);
            if (!modal) {
                return;
            }
            const modalContent = modal.querySelector(".modal-content");

modal.classList.remove("!hidden");
            setTimeout(() => {
                modalContent.classList.remove("opacity-0", "-translate-y-10");
                modalContent.classList.add("opacity-100", "translate-y-0");
            }, 10);
        });
    });

closeModalButtons.forEach((button) => {
        button.addEventListener("click", () => {
            const modal = button.closest(".modal");
            const modalContent = modal.querySelector(".modal-content");

modalContent.classList.remove("opacity-100", "translate-y-0");
            modalContent.classList.add("opacity-0", "-translate-y-10");
            setTimeout(() => {
                modal.classList.add("!hidden");
            }, 300);
        });
    });

// Close modal when clicking outside the modal content
    document.querySelectorAll(".modal").forEach((modal) => {
        modal.addEventListener("click", (e) => {
            if (e.target === modal) {
                const modalContent = modal.querySelector(".modal-content");
                modalContent.classList.remove("opacity-100", "translate-y-0");
                modalContent.classList.add("opacity-0", "-translate-y-10");
                setTimeout(() => {
                    modal.classList.add("!hidden");
                }, 300);
            }
        });
    });
});

Edulab LMS