Popup modal nested inside a slider?

Hey everyone!

I’ve recently ran upon a problem: I created a slider and linked it to a CMS list, and I wanted every slide to open a specific popup modal (full screen) when clicked, but I can’t get this to work.

I menage to get this ideia running on a CMS card grid, so I tried to apply the same logic (hidden component, parented to a wrapper, with position set to fixed relative to the body that opens with an interaction on the wrapper), but that doesn’t seem to work…

From what I could gather, once I place a div inside the slider, there’s no way to make its position relative to the body. It always stays relative to slider (or at least it’s appears to be).

Does anyone know any workaround? Is there a way to place a popup modal that opens on click inside a slider? Help me wizards!

[I currently don’t have permission to share the read-only file, but I’ll update the post as soon as possible with the link – or I’ll just create a mock version of the component]

Try using “fixed” position. That way it should be always relative to the body rather than the parent element (it’s realtive to parent when you use “absolute” position.

@ivanravena

Hi, did you manage to solve this? Ive been trying to find a solution with jQuery but so far not found anything! Any help would be appreciated.

Thanks
Rupert

Hello!

Unfortunately, no… I ended up scrapping the idea and just using the slider without the pop-up.

From what I could tell, the “mask” element of the slider is the problem.

I hope you manage to find a solution!

Hey there!

Thanks for the answer and sorry it took me a (long) while to reply! Unfortunately, using “fixed” doesn’t solve the issue.

I ended up just using a regular slider, without the pop up. Let’s home someone in the future finds a workaround!

Has anyone found a solution for this? I’ve come across this problem a few times and have had to abandon it each time as I’ve not managed to find a work around. Any assistance on this would be greatly appreciated!

Just bumping this topic again - I’ve got a client that wants a pop up modal in a slider, and I don’t have a good solution for them. I could set up a unique modal (outside the slider) with a unique interaction to open each one, but that’s clunky and adds more interactions to the page than should be necessary.

I’m also in need of a solution to this issue. Pop-up modals inside CMS Slick Slider are not displaying properly as Fixed relative to the body. They appear to be constrained by the collection item. I find it hard to believe that there isn’t a solution for this yet.

Great questions, everyone! :smile:

You’ll likely have to place the Modal Parent elements outside of any dynamic slider (Slick Slider presents some interesting experiences).

Are nested modals (nested within modals or other components) a common request? It’s quite a place to bury content on the web sometimes, so you may want to reconsider the experience.

Is this what you are looking to achieve? https://www.danieljameslondon.com/product/boy-london-silver-foil