Hi all. I have a general list of CMS Сollections. I need it to open a popup when I click (to view details), rather than loading a separate page. I can’t find a solution.
Here is my public share link: LINK
(how to access public share link)
2 Likes
Hi there,
You’ll likely need to use Webflow ‘Interactions’ for this, and instead of doing this via the Collections Page (the purple one under pages), you can do this on your normal pages by dropping in a ‘Collections List’
From here, you can drop the required elements (headings, text etc.) into this collections list and then create the popup using interactions. You can also use the filter/sort area to limit which of the collection items is shown (i.e. to only show 1 item/sort by date etc.).
Hope this helps.
- Dom
1 Like
I can do that. More interested in how the information is not on a separate page, but in the pop-up output.
That is, in the collection settings, I set the URL to a separate page. And I need it not on a separate page, but in a popup.
I need the exact same thing. I have collection list on a page and want to load the detail page into a pop-up modal and not open it as a new page.
1 Like
Sorry for the misunderstanding - think I get what you mean.
Can you not design the pop up (i.e. div block that overlays everythign else), build it using the collections list and drop and drag all the elements in (as above), then use interactions to make that popup come up (as opposed to the traditional click a button > new page)?
Would mean that when someone clicks the button/trigger, it pops up as required and you can build the CMS information into the pop up no different to building it on a secondary page.
hi @kis.shevchuk if I understand correctly you can create modal inside CMS item. this mean that item have some element you can click to open modal and in modal you will populate information pulled from CMS. Here is example image.
1 Like
hi @kis.shevchuk here is a short video description how to you have requested
and here is this demo to study I keep live for some time
3 Likes
The solution comes out rather complicated, but it works. Thank you very much for the video tutorial. Have a nice day 
1 Like
Hey Stan 
It works properly, thx. But the problem is when on page load the modal which is hidden by default is forced to be shown as visible, and I could’t have found any solution to the situation.
Any thought to solve it or where I’m doing wrong?
Thx a lot…
HI @cagars can you be more specific were is your modal as there is many pages and go through them and open every element on each site to fin your modal will be time consuming. 
Sorry @Stan, my bad…
On the navbar, “MENÜ” can direct you to the page I’m mentioning (Kahvaltılar). And the modal is shown on the image I uploaded.
Hi @cagars the issue is related to your secondary click (close modal)
BTW after short check I have noticed another issues on website that should be fixed before go public.
1 Like
Thank you @Stan,
There were approx. 5 mins to go insane and you fixed it, thank you very much. I just started structuring the menu, and gonna fix all other issues I know. But I appreciate If you let me know what you see that need to be fixed.
Thx a lot again!
2 Likes
Hi @cagars there are issues with horizontal scroll (overflow), another thing that you hiding modal with CSS and not setting it as initial value on click (check my example in read only) you should hide modal in this way only when working on page to get access to other elements.
Like I have mentioned do not know the reason why you place everything into form, that is not common practice.
m2c
Thx @Stan, I’ll do the way you said for modal.
I used form, cause I need to add some filtering to the collections, so the system I choose requires all elements to be in a same form.
I’ll look at the overflow issues as well.
Thank you so so much again!
Hi @Stan I am working on a project that requires the exact same functionality you built in your example. I built it exactly like you did, but for some reason, when I click on the item to open the modal, all the CMS modals open up at the same time. I have played around with your read-only file and I am just not getting it! I don’t know what I am missing. If possible, could you please help? I would really appreciate it!
here is my read-only link: Webflow - Haus of SB
HI @Simrit_Bhatia here is short video with how to
1 Like
Omg I cannot believe I didn’t think of that!! Thank you so so much @Stan for taking out the time!! This helps a lot!!
1 Like