Showing Multiple Instances of Modals Using Finsweet Att...

At a glance

The community member is using Finsweet's modal method to display multiple instances of modals in their Webflow CMS cards. They are finding it challenging to create unique instances for each card, as they have to manually add plain text fields like "open-1 modal-1 close-1" for each new CMS item. The community member is looking for a better solution to this problem.

In the comments, other community members suggest using Finsweet's CMS attributes to create dynamic attributes, or a video tutorial on adding multiple modals in Webflow. However, the community member has already tried using CMS attributes, but found the solution to be "dumb". They also mention that they had issues with the Webflow modal's "toggle" logic, which caused problems with opening and closing the modals.

The community member has decided to use the current "working state" for their internal company project, but they are aware that there might be a better solution. Another community member suggests that loading the modals only when they are clicked could help with performance issues, as the community member had to create a custom jQuery solution to address the problem of Webflow loading all the modal videos at once.

Useful resources

ÁÁdám Simon

This is not Relume related but Finsweet. I'm using this method for showing multiple instance of modals.

https://finsweet.com/attributes/modal

I have CMS cards which include individual modals but creating unique instances drives me crazy. I managed to get different data for all the cards + their modal instance but I have to add plain text fileds into my cms like:

open-1
modal-1
close-1

This means whenever I create a new CMS item I have to add these into the fields. For me this feels really stupid. Is there a better solution?

14 comments

ÁÁdám Simon

This is the frontend, the sidebar is the modal

MMatt Johnson

this video I did might get you pretty close.
https://relume.notion.site/How-to-add-multiple-modals-5012143c03f14e6da19f8cd3e23e7f3f?pvs=4

In this case, I don't think that you need to worry about "multiple instances" because to Webflow the modal itself is not actually being iterated, its just the content, I could be wrong.

MMatt Johnson

If that is truly not the case and you need to create dynamic attributes, there's an attribute for that as well.
https://finsweet.com/attributes/cms-attribute

MMatt Johnson

which might be what you are already doing

MMatt Johnson

Lastly, if none of this resolves the issue for you, I'll need a read-only/preview link in order to help more.

ÁÁdám Simon

Thanks Matt, yeah I ended up using the CMS attributes but combining with finsweet's accessible modal solution made my data pretty dumb. I like your method though, I also done the same thing previously but I gave up on the interactions since I was unable to solve opening and closing. Webflow use "toggle" logic for clicking and the modals were fine until the second click. I see it worked for you without any problem. I was putting that together from scratch so I probably just missed something.

ÁÁdám Simon

For this project (it's an internal company thingy for an event) I'll be fine with this "working state". But I'll keep in mind there is a proper solution. Thanks!

MMatt Johnson

yeah that part definitely gets tricky

MMatt Johnson

sounds good

ÁÁdám Simon

In the end we ended up creating a custom jquery added to body because the modals have videos included and webflow loads up all of them which caused some performance issues. Is there any way to load the modals only when they're clicked? Just curious

MMatt Johnson

oooh yeah thats tricky. Let me dig in but likely that is your best bet. Though I wonder if the implementation of the CMS attributes could be different and work better too.

ÁÁdám Simon

Not sure 😄 I’m getting really good in quality webflow front end building in the last few months and my colleague who can code loved the structure and we solved it in 30 minutes. The solution is really sick and I just realized this kind of cooperation is powerful as hell

ÁÁdám Simon

Not sure about the attributes I added ID-s for the specific elements

ÁÁdám Simon

https://instantstudio.webflow.io
This will be a fun page for an ai music themed agency night event. There could be some ugly divs but that’s how it works now. Tried to be consistent first and a bit less later 😄

Add a reply

Community forum for knowledge and support

Showing Multiple Instances of Modals Using Finsweet Attributes