Create Pop up Modal for each CMS item

Hi there, I am struggling to create a pop up modal for each of the team member under our team section. I’ve used a CMS Collection for this.

  1. Can’t link them to the right person, the modal seems to work in reserve order?
  2. I’ve set up an interaction to trigger the modal, but when I close it, I see there are other modals too, so looks like the interaction trigger other modal with the same class?
    Would be great to get some help! thanks!

Here is my public share link:

The primary challenge in situations like this is to get your targeting right so that you’re opening the right modal with the right button.

Interactions has some support for that, but it’s heavily dependent on element arrangement.

Here’s how to fix the problems you’ve identified, however you’ll need to reconsider how you’re doing your modal and overlay layouts to get the effect you want.

Hi Michael,

Thanks for helping me on this! this works for opening up the individual modal but somehow the close button doesn’t work at all even I’ve set all the interaction targeting the siblings of the elements.

Can you help me to have a look at this as well? Thanks!

The video has a discussion of the close button too- it’s not closing siblings so you can’t target it that way. Parent or all with class should work, but watch the video again for that point, I can’t remember your element DOM structure off the top of my head.

1 Like

right! I am going to give it another try! Thanks a lot for helping out!