How can I make the modal popups in my Webflow CMS collection only open individually instead of all at once?
TL;DR
- Place modals inside each CMS Collection Item and avoid duplicate IDs by using unique combo classes.
- Set modals to hidden by default and use Webflow interactions scoped to “Only children with this class” to open and close each modal individually.
If all your modal popups from a CMS Collection are opening at once, it's likely because all modals share the same ID or interaction. To make each modal open individually per CMS item, you need to ensure unique targeting using Webflow’s CMS-specific structure.
1. Use Unique Classes Within the Collection List
- Place the modal inside the Collection Item so each item has its own modal.
- Avoid using global IDs like
#modal. Webflow replicates IDs across CMS items but IDs must be unique in HTML, so this can break functionality. - Instead of IDs, use combo classes (e.g.,
modal-wrapper item-1,modal-wrapper item-2) or use Webflow’s built-in structure to scope interactions.
2. Set Modal Display to Hidden by Default
- Select the modal container inside the Collection Item.
- Set its display to None initially via the Style panel.
3. Configure ‘Open Modal’ Interaction
- Add a button or link (e.g., “Open Modal”) inside each Collection Item.
- With that trigger selected, go to Interactions panel (lightning icon).
- Create a Mouse Click (Tap) trigger → Start an Animation → New Timed Animation.
- In the animation, target the modal in the same Collection Item using “Only children with this class” to ensure that only the related modal opens.
4. Configure ‘Close Modal’ Button
- Inside each modal, add a close button (e.g., “X”).
- Add a Mouse Click (Tap) trigger to that button.
- Create a new animation to hide its parent modal (again using “Only children with this class”).
- Ensure both the open and close animations change Display from None to Flex/Grid and back, not just Opacity.
5. Test on Preview and Publish
- Click each item’s open button to verify that only its modal shows up.
- Confirm that closing works independently per item.
Summary
To make Webflow CMS modals open individually, place the modal inside each Collection Item, avoid duplicate IDs, and use Webflow interactions scoped to “Only children with this class” to control visibility. This ensures that only the corresponding modal opens when triggered.