Streaming live at 10am (PST)

Modals - How to stop the webpage from scrolling when a modal window is open


#1

Hi,

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:

  1. 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?

  2. 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.

Any help would be great! Thanks


Here is my public share link: LINK
(how to access public share link)


#2

Paste this in Page Settings > Custom Code > Footer Code

<style>
body.noscroll, html.noscroll {
  overflow: hidden !important;
}
</style>
<script>
var Webflow = Webflow || [];
Webflow.push(function() {
  $('.link-block-button').click(function(e) {
    e.stopPropagation();
    $('html, body').addClass('noscroll');
    $('.modal-div').scrollTop(0);
  });
  $('.close-link').click(function(e) {
    e.stopPropagation();
    $('html, body').removeClass('noscroll');
  });
});
</script>

Will only work in published site and not designer.


#3

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?

Thanks in advance!


#4

Hi, thanks for your quick response.

I've added the code to the footer and published the site. It seems now the close button doesn't work anymore?

Thanks


#5

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.


#6

A few changes needs to be made. See updated script above.


#7

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:

Really appreciated all your help :slightly_smiling:


#8

@samliew very nice. I could use this as well.

@Jax It seems the only icons working are the 1st two ? Fuel Broadband and Logos.

With those 2 icons... every seems to work. Only issue I saw is that it remembers the scroll position in the modal window.

So - for example with Fuel Broadband... if scroll all the way down
- and with Logos... you scroll halfway down...

Reselecting Fuel Broadband will display the bottom of the modal...
whereas reselecting Logos will display the modal window half way down.

Guess I'm saying - the modals should reset to top of the window every time the modal lopens.


#9

$('.modal-div').scrollTop(0) should have worked. Perhaps we should put it when closing the modal instead:

  $('.close-link').click(function(e) {
    e.stopPropagation();
    $('html, body').removeClass('noscroll');
    $('.modal-div').scrollTop(0);
  });

#10

@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


#11

No, I do not have a separate solution for iOS.


#12

Thanks for all your help @samliew


#13

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.