Efficient Methods for Managing Multiple Modal Instances in Web CMS

·May 26, 2024 08:21 PM

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

· Sorted by Oldest

Ádám S.
·
This is the frontend, the sidebar is the modal
Matt J.
·
Ádám S. 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.
Matt J.
·
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
Matt J.
·
which might be what you are already doing
Matt J.
·
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 S.
·
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.
Matt J.
·
yeah that part definitely gets tricky
Ádám S.
·
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!
Matt J.
·
sounds good
Ádám S.
·
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
Matt J.
·
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 S.
·
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 S.
·
Not sure about the attributes I added ID-s for the specific elements
Ádám S.
·
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 😄

Efficient Methods for Managing Multiple Modal Instances in Web CMS | Relume Community

Ádám S.
·
This is the frontend, the sidebar is the modal
Matt J.
·
Ádám S. 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.
Matt J.
·
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
Matt J.
·
which might be what you are already doing
Matt J.
·
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 S.
·
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.
Matt J.
·
yeah that part definitely gets tricky
Ádám S.
·
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!
Matt J.
·
sounds good
Ádám S.
·
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
Matt J.
·
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 S.
·
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 S.
·
Not sure about the attributes I added ID-s for the specific elements
Ádám S.
·
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 😄