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 Collection Item’s modal and trigger in a unique parent div to isolate interactions.
- Use Webflow interactions set to affect only nested elements (e.g., children with a class) to ensure each trigger only opens its corresponding modal.
If all modal popups in your Webflow CMS Collection List are opening at the same time, the issue is usually due to shared element IDs or class-based triggers not targeting individual items. Here's how to ensure each modal opens individually.
1. Use CMS-Specific Classes or Attributes
- In a Collection List, Webflow duplicates the same structure for each item. If all modals share the same ID or class-based trigger (like a button with a class
open-modal), clicking any of them may open all modals at once. - Avoid using duplicate IDs—IDs must be unique. Webflow automatically gives duplicate structures the same ID when reused in a Collection List, which violates HTML standards and causes this issue.
2. Set Up a Unique Modal System
- Wrap all content per Collection Item, including the trigger (open button) and modal, inside a common parent
div. - Place the modal and trigger inside this parent so interaction only affects its local modal.
3. Configure Interactions by Element Hierarchy
- Select the open button inside a Collection Item.
- Go to Interactions (IX2) panel.
- Create a new Click trigger, and choose Affect: Only children with this class or Limit to nested elements.
- For example, target the modal using a class like
.collection-modal. - Make sure the modal you’re animating is a sibling or child of the clicked element. Avoid targeting
All elements with class, which affects every instance on the page.
4. Modify the Close Button Accordingly
- For the close icon/button inside the modal, apply a click interaction.
- Set it to affect only elements within the same collection item wrapper, similar to the open trigger.
- Again, use “Limit to nested elements” to ensure interactions stay scoped.
5. Avoid Custom Code for Basic Modals
- Basic modal behavior (show/hide) can be handled entirely with Webflow interactions.
- If using custom code for modals (e.g., jQuery), ensure you're selecting elements contextually using
.closest()or.find()to narrow selectors down to individual Collection Item scopes.
Summary
To make modals in your Webflow CMS Collection open individually, structure each Collection Item to contain its own modal and open trigger, then target animation interactions specifically to sibling or child elements within the item. Avoid using shared IDs and global class triggers. Use “Limit to nested elements” in your interactions to scope behavior correctly.