Multiple Pop Up Modals

I have this ‘Meet the Team’ page in which I’m wanting a pop up modal for each staff member, with more info. I have built this for one staff member however:

  1. Is the most efficient way to create multiple modals, to duplicate the layers and redo the interactions/manually type each description?

  2. I am having issues with the modal. I thought I would be able to change the interaction settings to only affect the selected item and not the class, however now I realise that all the staff members have the same class as it’s a collection? What’s the best way around this? How do I get each collection item to have a different pop out?

Heres my preview link


Your best best here is to design the modal content and classes into your collection list directly. In your collection list item you’ll have a trigger such as a button click which will trigger the modal interaction.

In this arrangement, your button interaction trigger can easily locate the relevant modal element to affect, usually I use “sibling”.