Trying to create popover modals with dynamic CMS content

Design help CMS
1

I am creating a small web site which includes a CMS collection of glossary terms. Throughout the site, there will be many instances of glossary terms within the copy, and clicking on each term will bring up a modal view with that glossary term and its definition, all coming from the CMS collection. I have an example of one of these on the home page (community engagement) which is simply a test - the term and definition don’t match - to show what I’m looking for with the popover. Pretty simple.

The problem is, there will be well over 100 instances throughout the content where the glossary terms need to be clickable, and I want to be able to dynamically populate the modal with CMS content versus build each popover manually.

I suspect I will need some JS and custom code, none of which I’m able to write myself. I’ve seen a few examples of a popover using collection content, but none of the examples are what I’m looking for. Is there someone who can help me with this?

Thank you!
-pminnelli

Here is my public share link:
https://preview.webflow.com/preview/bpireport-org?utm_medium=preview_link&utm_source=designer&utm_content=bpireport-org&preview=33224001f96898f6ff35b7045c962a75&workflow=preview

2

If you’re looking to do this tied to collection list items, you can use this approach below. If you are trying to do this within e.g. rich text content and randomly connect things to your glossary popups than you’ll need some custom code to solve two additional problems;

  • Triggering your modal arbitrarily from e.g. a word click
  • Retrieving that related data if you have a substantial number of glossary definitions ( > 100 )

Sounds like a fun build, definitely possible. DM me if you are looking to hire a dev to help with that piece.

3

Thank you - I’ll look into that

1 Like