Streaming live at 10am (PST)

Display collection detail template page in a popup modal

I am trying to display the collection detail template page in a popup modal. I have a grid of team members displaying on the page (using a collection list), and when each team member’s name/photo is clicked on, I would like the modal window that pops up to display more detailed information about that team member (content would be pulled from the cms collection)

I’ve written to the Webflow support team and the staff member suggested I use custom code (ajax javascript) to accomplish this, but didn’t give any steps to follow. I am completely unfamiliar with either ajax or incorporating custom code into webflow. Help!

Read-only link (our team > class of 2019):
https://preview.webflow.com/preview/partners-neurology?utm_source=partners-neurology&preview=1b7a8bfdbfbd6501109a8e0ea6a8c92a

Published link:
http://partners-neurology.webflow.io/ourteam/class-of-2019

Hi @julester

I just did something similar and it’s pretty simple. You just create a pop up modal and put it in the information you want to display. Hide that modal and make it appear with an interaction.

See: https://zdhc.webflow.io/about (team section) and https://preview.webflow.com/preview/zdhc?utm_source=zdhc&preview=c25171830782a381d45237850fe6b78e

Hi @martijnrunia

I am just creating a popup modal with webflow cms similar to your project but it doesn’t work properly. would you please check https://myda.webflow.io/career !

After click on view and apply button it’s always shows the first modal even I click the last button and after click on the close icon it slides to next modal and this way it’s view all the modal after that it closed.

I followed your website preview. I didn’t use any code. does it requires custom code? please help me !!

Thanks

hey @martijnrunia
I solved the issues.

1 Like

@Asif_Ahmmad @martijnrunia I have the same problem as you, how did you achieved to solve the problem?

I can specify to see 1 item of the collection list, but I can’t figure out how to specify that it is exactly the item that the button should refer to. What I want to achieve:
So I click on team member 1 button, see team member 1 pop up content.

I click on team member 2 button, I see Team member 2 pop up content.

If code is needed, what is the code and where to input? Please help.

Did you ever solve this Jennifer - it sounds like exactly what I’m trying to do

Hey Martin, I know this thread is like 2 years old now but I wanted to ask you, would doing a popup modal means that all the content has to be preloaded when you enter the page? I pretty much want to do the same as the OP but my modals would have a few photos per team member and a bit of content so I’m worried about load speed