I’m creating a portfolio webpage and using a modal to display each piece of my work, the modal itself is scrollable as I’ve got a few assets to show. I’m facing two issues:
When the modal is open and you scroll all the way down, then when you close the modal the main home page has also scrolled down, how do you stop the home page from scrolling when the modal is open?
When I revisit a modal that has been already visited and scrolled all the way down and reopened, the modal opens again with the page scrolled down. So you have to scroll up when revisiting a Modal. Basically the Modal stays in the same position as it was when it was last visited. Is there a way for the Modal to always open starting at the top of the page
I’ve shared the link to my site, note only the first two boxes are currently working (Fuel & Logos) at the moment as I’m stuck with these two issues.
Hi @Jax, thanks for the question. Could you please publish the site with the custom code added to the footer, and then share the link to the published site?
Just been testing this again and it seems temperamental in Firefox, some times the close link works other times not, when the close link works the home page still gets scrolled down and when I click back into one of the modals the modal is still in the same position as it was when it was last visited.
Close link works okay in Safari & Chrome, but the issue with the page scrolling and modal position is still the same as before.
Hi Sam, Thanks for that. I’ve applied this new script and it seems to have fixed the first point with regards to the main home page scrolling down when the modal is open. However the second point still remains, so when you visit a modal for the second time the modal opens in the same position as it was when last visited. So if I open the modal, scroll down close the modal and reopen it, it opens scrolled down. Is it possible to update the script so when a modal is opened it always opens at the top of the page. The latest version is publish so you can see how it behaves:
@Sam - Awesome, that did the trick and it seems to work great on my Mac.
I have also tested it on an iPhone 6 & iPad mini and it seems like it doesn’t work on those devices. I tested it in responsinator and get mixed results as well:
Do you think there is a solution for this working correctly on other devices?
@revolution - Yea, just the first two boxes are working for now, I want to get it working properly before I complete the other boxes. It’s still very much a work in progress