How to create modal that populates data from CMS

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)

1 Like

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

1 Like

The solution comes out rather complicated, but it works. Thank you very much for the video tutorial. Have a nice day :heart:

1 Like

Hey Stan :wave:

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?

Here is the link: Webflow - Shakespeare Bistro

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. :wink:

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. :wink:

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!