Pop up problems with scroll

Question

This is what i'm trying to create CodePen example

The idea is that the popup should work exactly like the Pinterest Link

The problems i have are:

• When u close the pop-up, the page always jumps to the top. It should stay where it was
• The popup is fixed, how can i make it that you can move it like on Pinterest? I would like to have some spacing on the top and when u scroll u actually move the up
• If u have any chance to view this on mobile, please do. I want to make the site responsive. If u view the pop-up in the mobile version, it isn't smooth. That means when u scroll and move you finger from the touch screen, the scroll stops immediately. So it feels like you need to push the content down with you finger. It doesn't flow so u could swipe and it would stop slowly

I try to figure this out for days already and can't get it. Any help is welcome :) tnx!

Answer 1

Instead of using anchor tag for the close button like this :

<div class="close"><a href="#portfolio">close</a></div>

Do this instead :

<span class="close">Close</span>

Don't forget to add cursor:pointer style for .close class.

Your problem will be solved.

Right now, the image that triggers popup disappears when you click close button on firefox just in case if you haven't checked on it yet. So, better not use anchor tag for the close button. My suggestion would be Never use anchor tag for close button.

Hope this helps.