Make individual modal appear from CMS collection, not ALL of them

Design help CMS
1

Read-only link HERE

Hi there,
I am making a page with a collection, and under each collection item is a ‘Learn more’ button. I would like the modal specific to THAT CMS item to appear, but at the moment, all my collection items appear stacked on top of each other (which you can see if you work your way through the ‘X’ in the top right of each modal).

I’m not sure how to get just the one modal specific to that CMS item to show each time. I’m sure it’s because my ‘Learn more’ button isn’t tied to a field in my collection list, but I’m not sure what exactly to tie it to.

The important section is section 30, under the div block ‘Grid.’ The modal wrapper in question is labelled ‘modal wrap.’

Thank you in advance for your advice

2

Hi Henrik,

The button is set to show all elements with the Modal class. To fix the problem:

  1. Take the button out of the ‘simple-card’ div. This will enable you to trigger only Modal that is a sibling, see no. 2.
    Screen Shot 2020-08-11 at 06.33.44
  2. Set the interactions to trigger class ‘Modal Wrap’ that is ‘Only siblings with this class’.
    Screen Shot 2020-08-11 at 06.33.47

Doing these should only show the modal for the card that you clicked on.

2 Likes
3

This worked perfectly, thank you!

1 Like
4

I think I have a similar problem but this solution isn’t working for me.
Read only link

I am trying to have a popup for only for each of the collection list items. Right now all the pop up’s show and I just want the one from for that particular item.