Make pop up stick to the center of the screen?

Design help General
1

I have made a pop up modal that looks and works great in preview in Webflow’s designer. But when I publish the site, the modal pops up in the center of the site’s page, instead of at the center of my screen, so I have to scroll up or down to find it. My modal wrap is in a Full , Fixed position, which works just fine in preview. What do I need to change to make it work on my published site?

Thanks

Here is my site Read-Only: LINK
Here is my published site: LINK

5

For anyone wondering, I followed Nelson’s (@PixelGeek) tutorial on youtube HERE to build and make this modal interactive, but I’m still having the issue outlined above.

6

You’re almost there, just need to make a few adjustments to get this working as (I think) you’re expecting it to:

7

Hey @mikeyevin, this was a really great and informative walkthrough, and definitely helped make it work in preview! My biggest issue is the modal sticking to the center of the screen (no matter where you scroll) doesn’t seem to carry through when I publish the website. Here’s the link to the published page, and when you click ‘Learn more,’ the modal appears somewhere else on the page and doesn’t stick when scrolling. Let me know if that’s something you see as well, or if it works perfectly on your computer. Happy to make a screenshot video of the issue as well if this doesn’t make sense.

Cheers!

8

Hmmm, this is pretty strange behavior but I’m thinking it’s either caused by the mixitup filtering or possibly by some other additional code that’s running on the live website.

I went ahead and created my own test and published it using the same method as you and it works as expected:

https://mikes-awesome-project-003eb9.webflow.io/cms-modal

Read-Only: https://preview.webflow.com/preview/mikes-awesome-project-003eb9?utm_medium=preview_link&utm_source=designer&utm_content=mikes-awesome-project-003eb9&preview=fe69cc0009193a8ec56ed05f9c6a9199&pageId=5f454de360e2a4861ec97b0f&mode=preview

If you remove the filtering code, do you still see the issue on the published website?

1 Like
9

It works!

From your suggestion, I went through and selectively deleted chunks of custom footer code and found that the script causing the issue was something I had used a while ago to get smooth scrolling on mobile devices.

<style>
  body > div {
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
    -webkit-overflow-scrolling: touch;
  }
</style>

I’ll look into why exactly this was causing the issue, and see if there’s a workaround to keep smooth scrolling, but this was perfect. Thank you @mikeyevin for your help!

1 Like