Is it possible to create a popup modal inside a slider?

Design help Animations & Interactions
1

Hi everyone :blush:

I just spend some hours figuring out on how to archive the following:

Selecting a collection list item within a slider and on click, there should open a pop up modal with dynamic CMS item.

  • So far so good, but im struggling to realise this in the best possible way.

I prepared an overview with some details in my Read-Only-Link.

Thank you very much in advance for your help!

:yum:

Here is my site Read-Only:

https://preview.webflow.com/preview/tobiass-fabulous-project-61363a?utm_medium=preview_link&utm_source=designer&utm_content=tobiass-fabulous-project-61363a&preview=0b13f6f3763c7b7ffc44b77333cfd0bd&mode=preview

2

@Tobias_Steffen hi did you found any solutions? I have the same problem.

3

Hi @jjen,

unfortunately not.

In the end i took another approach on this project and did it without a pop up modal.

The problem was that the popup wasn’t visible over the size of the collection item, as it was a child element of it.

Maybe you could try the following:

When you open the modal via an interaction, resize/scale the collection item element. This way the modal inside it can be displayed bigger. To darken the background, place a div with absolute positioning outside of the collection list and trigger it with the pop-modal-interaction.

You just have do deal with the offset and make sure that it will be displayed centered on the screen.

I think this is more an hack instead of a clean solution. Should i get some time in the future, i will try to investigate further on it and let you know about it.

Best

Tobias

4

I,m struggling with that same issue for a year now. the pop-up works every where else, but keeps on fixing the the “slider slide” instead of to the full screen (body).

5

Same problem here. I need to make a modal inside a slider for a client. Did anyone found any workaround or some solution for this? ://

6

In this 2023 end still am looking for this pop up solution ? it is really necessary … :frowning:

7

Intriguing thread. It should not be overly difficult to make an interactions-based pop-up work in a slider, but it may be a bit trickier to get the built-in slider interactions to work smoothly with your custom pop-up interactions. Lots of things trying to do stuff.

@Shamim_Hossain_sagar

An easier way is to build the interactions popup outside of the slider, give it a hidden trigger button with an ID. Then in your slider, it’s easy to “click” that trigger button using JS.