Fullscreen pop up within a pin Element

[Leptitnouveau]

Hello,

I have created a small horizontal scroll animation for a project, but at some point, the user might click on a button which open a pop up. The problem is that, if the user scrolls down and then click on the button, the pop-up position is still determined by its parent, and not the viewport. By looking at some topics on the forum, I saw that it is recommended to avoid using position fixed within a pinned element. So the only solution that I can think of, is to put the pop up outside of the pinned element but since I use React component in my real project it would be weird to put my pop up states within the parent component (and trigger re-renders for components that have nothing to do with it).

 

Thanks in advance for your answers and have a nice day!

Here is a small demo to have a better understanding of my issue: 

See the Pen ogbENJz?editors=1000 by Leptitnouveau (@Leptitnouveau) on CodePen.

[mvaneijgen]

If I where to build a pop up I would use the native <dialog> element https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog to make it user friendly and most of all accessible. Just having a <div> somewhere doesn't cut it anymore these days or you need to do a lot of manual tweaking to get things to work properly. 

 

A <dialog> elment will also overlap all other content and will thus indeed be outside of the document flow and it can then also be it's own component, so that would be the best of both worlds I would think

 

Hoop dat het helpt en veel geluk met je project. 

[Rodrigo]

Hi,

 

You can definitely use the createPortal API for this and a React context to share the state of the popup and use position fixed in the popup/modal element as shown in this demo:

https://stackblitz.com/edit/vitejs-vite-ukkf9are?file=src%2Fcomponents%2FModal.jsx

 

Also you can use Flip for this as well without the need of actually modifying anything and just use the original element:

See the Pen XWOeLEb by GreenSock (@GreenSock) on CodePen.

See the Pen RwRbXKX by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[Leptitnouveau]

Hello,

Thanks both of you for your answers, it helped me a lot!

Have a nice day!