How can I make the modal popups in my Webflow CMS collection only open individually instead of all at once?
TL;DR
- Wrap each CMS item’s modal and trigger in a shared parent and use Webflow interactions set to affect only nested elements.
- For advanced control, assign unique
data-idattributes from the CMS and use custom JavaScript to target matching modals and triggers.
When using modals in a Webflow CMS Collection List, triggering one modal often opens all others due to shared classes or IDs. Here’s how to fix that so each modal only opens individually.
1. Understand the Problem
- Webflow duplicates modal elements for each CMS item with the same classes and attributes.
- When you trigger one modal (e.g., with an interaction on a button), all modals respond if they share the same target class or ID.
2. Use Unique Attributes per CMS Item
- Each modal and its trigger should be uniquely targeted using a specific attribute, such as a combination of a custom
data-attribute and the item's CMS ID or slug. - Webflow interactions can't dynamically target unique elements out of the box, so targeting needs to be scoped carefully.
3. Use Webflow’s Native Interactions with CMS-Friendly Structure
- Wrap each CMS item (modal trigger and modal popup) inside a shared parent element like a div block.
- Set all interactions (open/close modal) to target "Only children with this class" instead of selecting global classes.
4. Set Up the Interaction Properly
- Select the trigger element inside a CMS item (e.g., a button).
- Set up a Click or Tap interaction.
- Use "Affect: Element" → "Class" and check "Limit to nested elements".
- This makes sure that, when clicking the trigger, only the modal within the same CMS item opens.
5. Use Combo Classes or Custom Attributes for Advanced Control
- If targeting still causes problems, consider adding a combo class or a custom
data-idattribute from the CMS (e.g., from a unique field like slug or post ID). - Assign this
data-idto both the modal trigger and modal popup inside each CMS item. - Use custom JavaScript (added in the page's
<before body>embed area) to show/hide modals based on matchingdata-idvalues.
Summary
To make only one CMS modal open at a time, structure each modal and trigger within the same parent container inside the CMS item and use Webflow interactions set to affect nested elements only. For more control, use data- attributes and custom code for targeting.
