Help Creating Popups with Dynamic Content linked to Absolutely Positioned Link Blocks

Hello Community! I’m struggling to come up with a solution here: I have these link blocks absolutely positioned on a map. I want each each link to launch a popup with unique information pertaining to the “homesite” number.

My first instinct was to make the popup a component, but I don’t know how to create the connection between each link block to a unique instance of the component.

Then I figured CMS was the answer, but again I don’t know how to make that work since each link block is uniquely positioned.

Do I create separate popups for each link?

Here’s a quick Loom video describing the issue.

I’d really appreciate some guidance!


Here is my public share link: (Webflow - Nauka Nayarit)


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

Hey Zac,

I build a similar solution to this recently for a client. In their case, they needed a glossary of about 300 terms, and needed to link works in their report text to the popups easily and at-will.

Here’s a simple outline of how I built it-

  • CMS collection for all of the terms and definitions.
  • Interactions-based popup construction in the CMS, triggered by a button in the CMS.
  • ID or other identifier on the button to make it targetable - and clickable - by JS
  • Some form of trigger identifier, in my case it was specially formed links on words, in your case, could be links or custom attributes or something else. Depends on how you’re creating your map pins. What you need though, is that ID for your button trigger.
  • Custom JS looks for you pin to be clicked or otherwise triggered, and “clicks” the button to invoke the modal.

The basic design is easy to build but there are a lot of tricks to make it more elegant, to make the pop-up content more managable and wysiwyg editable, etc. Components can be used to good effect here as well. None of that may matter to you if you’ll be doing the admin on that data yourself, but it matters if you’re handing it over to clients who need to see what they’re editing.

Just like Zac said you would need some custom JS for this. Use the CMS to create each popup. Give each popup a unique identifier using a #number field or something similar. Then have each button ID reflect the #number in the CMS.

Then you could write some simple JS code that would look at the ID of the button and change the display settings of the popups to only show the one with the corresponding ID.

Some example code:

// Get all buttons with class "popup-button"
var popupButtons = document.querySelectorAll('.popup-button');

// Get all popups with class "popup"
var popups = document.querySelectorAll('.popup');

// Function to show a popup by its ID
function showPopup(popupId) {
  // Hide all popups first
  popups.forEach(function(popup) {
    popup.style.display = 'none';
  });

  var popup = document.getElementById(popupId);
  if (popup) {
    popup.style.display = 'block';
  }
}

// Attach click event listeners to all buttons
popupButtons.forEach(function(button) {
  button.addEventListener('click', function() {
    var popupNumber = button.getAttribute('data-popup');
    var popupId = 'popup' + popupNumber;
    showPopup(popupId);
  });
});

Thank you, @felix_hellstrom and @memetican! My JS skills are limited…but let me confirm:

  1. I do in fact need s separate popup for each number
  2. I would place your JS in the Before tag for my page?

You would have only one popup in the designer, but it would be inside of a collection list to generate the dynamic content variations you need. That collection list would be bound to the CE Homesites collection so it can source its content.

Add your popup trigger button inside of that same collection list, so that the click interaction can target its sibling popup. I’ll drop a cloneable that shows that construction.

For your wiring, I’m going to show you an attributes-based approach that will simplify this for you.
This is a simple piece of the triggering mechanism that I moved into a library for others to use.

On your trigger button, add a custom attribute of [wfu-ix-id] and databind the value to the slug of that property. Keeps it simple, and flexible.

Then for each of your pins, set the link to ## plus the slug of the item you want, e.g. ##hs-01. The tool lib will do the rest for you automatically.

@memetican, you are amazing. Wow. This is going to be a big learning experience for me. I’m going to give it a try now.

Do I hide this popup trigger button once added since my pins will ultimately trigger the popup?

Oh, I should also let you know that I will be the admin for this. I will not be passing this off to anyone. Maybe a component would be simpler?

IIRC, I typically hide the entire collection list containing all of the pop-ups. The cloneable will show you the exact setup I use.

Components add a layer of complexity, but I use them when I need to make the popups accessible in a non-popup format ( a page full of popup content ) that a client can then use the editor on.

You don’t need that added complexity here most likely.

I get hiding the list, but since the button itself will not be used, only my number/pins…do I hide the modal button that I’m applying the [wfu-ix-id] attribute to? See my preview link.

(btw, I’m very grateful for your help, thank you!)

The modal button goes inside of the hidden collection list as a direct sibling of the modal you’re triggering. If you’ve set it up as I did in the cloneable, the button is not part of the modal itself, so it won’t appear.

But yes you can hide it if you’ve taken a different approach. It doesn’t need to be visible to play its role.

@memetican I think I’m very close, but I’m missing something. Created a quick Loom for you.

And here is my preview link.

Hi Zac, I’ll message you.