How can I resolve the issue with my pop up modals in Webflow's CMS Collection, where the modals are not displaying the correct information and closing one modal triggers others with the same class?

When using pop-up modals inside a Webflow CMS Collection List, they often misbehave—showing incorrect data or multiple modals opening/closing at once—due to shared classes and IDs. Here's how to properly structure modal functionality so each item behaves independently.

​

1. Understand the Problem with Shared Elements

​

• Webflow repeats the same structure for each item within a CMS Collection List, meaning IDs or element classes like .modal and .close-button are reused.
• When a modal is triggered, all elements with the same class (e.g., multiple .modals) can accidentally be affected at the same time.
• Issue example: Clicking the trigger element opens all .modal elements, not just the one related to that CMS item.

​

2. Use Unique Attributes Instead of Shared Classes for Triggers

​

• Avoid relying solely on classes for interactions like "Show/Hide" because Webflow applies actions to all matching elements.
• Instead, use Webflow’s native CMS-based unique attributes, or custom attributes and JavaScript for more control.
• Assign a unique ID or attribute to the collection elements using the CMS item’s slug or ID field.

​

Example:

• In your modal wrapper element, add a custom attribute like data-modal="item-slug" where item-slug is a CMS field.
• Do the same with the open and close buttons.

​

3. Apply Unique Interactions with Webflow’s Element Targeting

​

• Webflow Interactions (IX2) allow targeting "Only children with this class" or "Element" rather than all elements with the class.
• In the Interaction panel, when applying a Show/Hide modal action:
• Choose “Affect” → Only children with this class (within the same Collection Item).
• Or, wrap each CMS item in a unique parent div with a unique combo class, and apply interactions within that scope.

​

4. Use Combo Classes or Nested Structure

​

• Wrap each modal in a dedicated div with a unique combo class like .modal-wrapper.item-1, .modal-wrapper.item-2, etc.
• Use interactions that trigger grandparents/close parents rather than all items globally.
• This ensures only the modal within the CMS item is affected.

​

5. Use JavaScript for Full Control (Advanced)

​

• If you need precise control, custom JavaScript targeting unique attributes (e.g., data-modal="slug") can manage modal behavior.
• Add click event listeners to specific modal triggers and manipulate visibility only for matching modal elements.
• Avoid using element IDs (like #modal) inside CMS lists, as IDs must be unique in HTML.

​

Summary

​

To fix pop-up modals inside a CMS Collection in Webflow:

​

• Avoid shared classes and IDs on modal elements inside CMS Lists.
• Use unique attributes (e.g., data-modal) tied to CMS fields.
• Scope interactions using “Only children with this class” or unique combo classes inside the Collection Item.
• Wrap each modal in its own container to isolate behavior.
• Use JavaScript for fine control if necessary.

​

This approach ensures each modal functions independently and displays the correct content.