Relume Community Icon
Relume Community
  • 馃彔Home
  • 馃搮Events

  • 馃數Announcements
  • 馃數General
  • 馃數Getting Started
  • 馃數Issues
  • 馃數Showcase

Powered by Tightknit
General
General

Custom Modal Interactions for Team Member Cards in Webflow

Avatar of BlairBlair
路

In Webflow, I have a team member card component. I have properties for name, role, photo, socials. I want to display a modal when I click a profile (component). However, I can't see how to add different interactions for each component instance. Example: click team member A, open modal A with their bio. Right now I can only have a single interaction that applies to all instances of the component, therefore every team member displays the modal A 馃槩 Any ideas? (Client not on CMS plan)

3 comments

  • Avatar of Emily M.
    Emily M.
    路

    When you add the interaction you can choose whether it applies to the selected class or to the selected element. Choose element and it should work

    馃憦1
  • Avatar of Sofian B.
    Sofian B.
    路

    Hi blair, I created a replit with the challenge and you can access the code: https://replit.com/@sofianbettayeb1/TechnologicalExtraneousOpenlook?v=1 Let me know if it鈥檚 not clear. But in short Every team member card has an attribute to open a modal

    <div class="team-member" onclick="openModal('member3')">
                <img src="member3.png" alt="Member 3">
                <h3>Member 3</h3>
            </div>

    Then it run a function to open the right modal for the right person.

    
    function openModal(memberId) {
      const modal = document.getElementById('modal');
      const details = document.getElementById('modal-details');
    
      details.innerHTML = `
          <h2>${teamMembers[memberId].name}</h2>
          <h4>${teamMembers[memberId].role}</h4>
          <p>${teamMembers[memberId].bio}</p>
      `;
    馃敟1
    馃檶1
  • Avatar of Sofian B.
    Sofian B.
    路

    Here is the result