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!