Use CMS value to load popup content

I have 2 collections: cards and popups. when clicked the cards show a corresponding popup.

i would like to reuse the same popup each time a card is clicked, but change its content on click of the card.

in the CMS, i’ve referenced an ID number (from popups collection) with a company name (in the cards collection). so when I set a condition in the right webflow menu, the content in the popup changes: e.g. “ID-number is equal to 2” - how can I send this value on click of a card to influence which popup content is shown? I already have a hidden div in the card with that number in it … so close

How can I recreate that condition-setting on click of a card? It feels like there would be a fairly straight-forward script, but I’m a designer who’s always on the edge of code comprehension…
(sorry i can’t share a read-only link because its client work)

The typical way to do this in WF is to have your modals separate, one in each collection list item. This makes them collection-list-item specific, and easier to invoke.

Here’s the approach I use

If you really wanted to use a single modal with content, you’d need some custom code to content-swap the modal content before it appears. It’s possible, I’ve never approached it this way.

In that case I’d probably make a special hidden DIV inside of the collection list item with the content for the modal, and then have the trigger fire my script to;

  • close any existing modal
  • find that item element
  • clone it over into the hidden modal
  • show the new modal

Thank you for this, I will check it out!

You can use a little JavaScript to grab the hidden ID from the clicked card and update the popup content dynamically.