const staffModal = document.getElementById("staff-modal"); const staffImg = document.getElementById("staff-modal-img"); const staffName = document.getElementById("staff-modal-name"); const staffRole = document.getElementById("staff-modal-role"); const staffClose = document.querySelector(".staff-modal-close"); document.querySelectorAll(".staff-card").forEach(card => { card.addEventListener("click", () => { staffImg.src = card.dataset.img; staffName.textContent = card.dataset-name; staffRole.textContent = card.dataset-role; staffModal.style.display = "flex"; }); }); staffClose.onclick = () => { staffModal.style.display = "none"; }; staffModal.addEventListener("click", e => { if (e.target === staffModal) { staffModal.style.display = "none"; } });

Level Up Your Pride

Dynamis | Seraph | Lavenderbeds | W15 | P58
Amari
Celeste
Asuka
Judas
Puffle
Mercedes
Elly
Rognir
Asura
Blaster
Ashlynn
Benna
Miravere
Lunar
Vex
Axel
Arym
×

const bars = document.querySelectorAll('.staff-bar'); const modal = document.getElementById('staffModal'); const modalImg = document.getElementById('modalImg'); const modalName = document.getElementById('modalName'); const modalRole = document.getElementById('modalRole'); const closeModal = document.querySelector('.close'); const prevBtn = document.getElementById('prevStaff'); const nextBtn = document.getElementById('nextStaff'); let currentIndex = 0; function showModal(index) { const bar = bars[index]; modalImg.src = bar.dataset.img; modalName.textContent = bar.dataset.name; modalRole.textContent = bar.dataset.role; modal.style.display = 'flex'; currentIndex = index; } bars.forEach((bar, i) => { bar.addEventListener('click', () => showModal(i)); }); closeModal.addEventListener('click', () => modal.style.display = 'none'); modal.addEventListener('click', (e) => { if (e.target === modal) modal.style.display = 'none'; }); nextBtn.addEventListener('click', () => { currentIndex = (currentIndex + 1) % bars.length; showModal(currentIndex); }); prevBtn.addEventListener('click', () => { currentIndex = (currentIndex - 1 + bars.length) % bars.length; showModal(currentIndex); });