Trouble with modals and dynamic content

Design help General
1

Hi everyone,

I appreciate your time and energy. I’m currently using a Dynamic List on my website to show images that will be used as navigation buttons (i.e. images of words like “Meet the Team”, “Donate”, and “About the Project”.) When a user clicks on one of these images (which is really a Dynamic List Element) I’d like to display a modal that then shows the other dynamic content associated with that particular Dynamic List element.

I’ve tried putting my modal wrapper (which is the background cover and modal div) inside the dynamic list element, but my issue then is my modal becomes confined to the size of the dynamic list item, and it does not cover the full screen (you can see this undesired behavior in my read-only link)

How can I achieve the effect that’s shown in my published link? (my published link correctly shows the modal and background how I’d like to, however it is not connected to dynamic content like I desire.)

Read-only link: https://preview.webflow.com/preview/paper-keys-v1?preview=0de06edaf83eed37b54c46102c099d9f

Published link: http://paper-keys-v1.webflow.io/
(Published link has the modal functionality that I want, however to achieve this, the modal is not nested inside a a Dynamic List, and thus does not satisfy my end goal…)

2

I decided to take another approach to this. If there’s any way to display Collection Template Pages as modals, that’d be great!

3

Hi @Benjamin_Williams

All you need to do is give the Modal wrapper a position : fixed and it should work perfectly.

4

I’ve just tried this, and the modal wrapper and modal div still seem to be confined to the size of the dynamic list item.

5

That’s strange @Benjamin_Williams

Check this animation where I created the modal you want in your own preview-link:
https://cl.ly/313U2X413P1P/Screen%20Recording%202017-05-10%20at%2005.40%20PM.gif

Looks like you have some styling within the dynamic list component that is preventing you from achieving the desired effect. I suggest you recreate this section with a new dynamic list if you still intend to use the modal.

Also be very careful when you decide to change the display settings of any native Webflow component such as dynamic lists, sliders, tabs, etc… They can mess us the structure of these components and their content.

​Hope this is helpful.

6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.