Modals inside CMS lIst

Design help CMS
1

Hello Webflow community.

I’m new to webflow and loving it. I am having trouble finishing a modal window setup within a CMS List. I have thoroughly read the modal tutorial and tried to copy a read-only project that has a modal set up inside a CMS List but I cannot get it to work.

On my About Us page, the modal containing a name/title/bio for each staff member does appear when the a photo within a CMS grid is clicked, BUT it shows ALL of the modals at once. The modal elements are all children of the Collection List Item and the name/title/bio that will appear in the modal is being grabbed from the CMS.

Am I missing something global or do I have something nested incorrectly? Please help oh WF Gurus before I have no hair to pull out. :slight_smile:

(I am using only WF interactions, there is no jQuery in the page as of now)

Thank you!
Doug

Here is my public share link:
https://preview.webflow.com/preview/gramoscope-demo-v1?utm_medium=preview_link&utm_source=dashboard&utm_content=gramoscope-demo-v1&preview=b7586b1b721c8af98dd323e9cb29baa5&mode=preview

2

I think I figured out the issue!

I’m sure there are many ways to create/nest modal systems inside a CMS List, but in my case the fix was in the interaction on the photo to show the modal window for that staff member (which is inside the Collection List item element): choose the “affect only siblings of this class” option in the interaction settings – which makes sense: it then won’t show “all elements with this class” that are being generated by the CMS connection.

3

I have this exact problem with my Premium > Timetable page

I can make the “Description” button open a modal window which shows description text from the collection but ALL the modals for ALL descriptions show.

When I try Doug’s solution of choosing “Limit to sibling elements” I get none of the descriptions showing at all, as if the Description button doesn’t detect any click.

Hope someone can help!

Read-only project link