Modal won't close in collection list

Design help Animations & Interactions
1

Hi! I am working on a website for a client and for the life of me cannot figure out how to close my modal. I’ve created an interaction with the “X” image in the modal container, but when I change the Display to “None,” my modal no longer shows up with the “Click” interaction. I am just trying to close the modal on click. I’ve currently set the interaction for Modal Open to the item wrappers in the collection list. I have also put my Modal Container on the same level as the Item Content. Any advice and assistance is much appreciated!!

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

1 Like
2

If you’re inexperienced with interactions it can be very challenging to get modals setup properly. You might want to try a non-interactions approach.

I have a cloneable here that handles all of the modal triggering, closing, and timed suppression- you just configure it.

Demo - SA5 Popups & Modals

Cloneable - SA5 Modals Library - Webflow

Docs - Webflow Popups & Modals | SA5 | Sygnal Attributes | Designed for Webflow

1 Like
3

Hey @accountingdns ,

You can set the display property of modal_wrapper element to ‘None’ as highlighted in the screenshot below:

AJ - Modal Wrapper
AJ - Modal Wrapper1853×739 267 KB

And in the interaction that you have linked to the ‘X’ in the modal, can you ensure that you uncheck the box for both the opacity and the hide/show action as highlighted below:

AJ - Close interaction - State
AJ - Close interaction - State330×782 42.3 KB

Save the interaction and publish the site. Now the modal should open when a user clicks a CMS item and it should close when they click on ‘X’.

Hope this helps.

1 Like
4

Thank you SOOO much! It works now. Certainly new to modals, but I appreciate the detailed insights!

1 Like