Open CMS Collection Page Template inside Popup Modal without using CMS Collection List

I have a page with ~100 text links.

Design constraints prevent me from using a CMS Collection List to display these links (I need 1 item on the first row of a table, 4 items on the second row of the table, 8 items on the third row of the table, etc. with differing font heights depending on row).

I would like to open a popup modal via text link and display a layout matching the CMS Collection Page Template. The URL would be taken from the CMS Collection Item.

Right now just linking the CMS Collection Item URL goes directly to that Item Page.

All solutions I have found for CMS Item modals require using a CMS Collection List in the first place rather than flexibility to link individual items manually.

I am currently using multiple CMS List’s with individual styling and specific filters applied to overcome my design restrictions while still using a CMS List.

The 20 CMS Lists per page limit will provide some additional challenges, but I have not found another way to target a specific CMS Item.

Hi @joestory

I’ve got 2 possible solutions for you.

Solution 1: A solution by Timothy Ricks to link 2 Collection - Here’s the link: jQuery Builder Course (Lesson 4) - YouTube

You’ll have to adjust the code to suit your design and behaviour.

You might also benefit from this tutorials:

…And when you sign-up as a patreon these topics go into a lot more detail.

Solution 2: Wrap all your content on the CMS Collection Item Page in a container, give that container an ID and call-up that ID with custom code on your page.

Here’s a demo on how it’s done: https://webflow.com/website/Multiple-nested-Collections-with-unlimited-Items-on-single-pages-in-Webflow?ref=showcase-search&searchValue=nested

Hope this helps!

~ Rhino

1 Like

The 2nd solution is interesting. I had huge performance issues with the designer, including after the CMS performance update, so 20 CMS lists on the same page was a non starter. I ended up creating an iframe to display my CMS collection item page design, and manually creating links to each items’ URL targeting that iframe.

While this was considerably more effort than having a CMS list pre-populate those URLs, it was necessary to have full control over my design anyways. See it in action here: https://www.lineupdrop.com/lineup-drop/coachella-2022

Iframe music player on the right is displaying CMS item page.