Streaming live at 10am (PST)

Having trouble linking modal interactions to CMS components

So I have a CMS collection built for services listed on a client’s website. I have designed it in such a way that upon clicking the details button, a modal will pop up – giving a description specific to each service. The problem I am having is that the button is not linking to the proper CMS collection item. Instead, all the modals animate in at once – with the CNC Machining being the front-most. How can I link each details button to a specific modal? Obviously, an easy fix would be to ditch the CMS collection and build each one manually. But my client’s services change often so I want them to have an easy way to add/delete services.

Side note: I am using legacy interactions since CMS items are not yet supported in Interactions 2.0

My read-only link is below and any help would be appreciated!

Here is my public share link: LINK
(how to access public share link)

Hi, may I suggest an alternative interaction? I would use a slide in from the button, instead of modal popup. I think slide in and out is a more effective UX.

So when user clicks “Details Button” the content description slides out from underneath it. That would be so cool, because the screen viewport is not interrupted. Users can scroll, click button, see content, scroll click another which closes first, but opens second.


User hovers “view details” - shows description. On hover out - description closes. It would be fast, clean and concise. :grin:

If you need help implementing I’d be happy to assist. But consider moving from modals, their very interrupting, similar to popup subscribes and all those distraction interactions.

Slide in and out is a subtle micro-interaction that users can appreciate because they can move on quickly. And the content is “Hidden” until they choose it.

Just offering options.