How to disable scrolling on a page when a modal window is open?

  • 0
    Such a problem:

    when a pop-up window opens on a site, the site itself can be scrolled to the very footer ..
    You need to disable this feature.
    I tried it like this:

    body {position: fixed; } - with an open form.

    But the problem is that sometimes the height of the form is higher than the height of the screen, and you need to be able to scroll the page to the end of the form.

    Those. the expected result is that the page can be scrolled, but only to the end of the height of the web form.
    How can you solve this?

    PS I don't use bootstrap.
    JavaScript Xander Hogan, Apr 30, 2019

  • 2 Answers
  • 0
    You are not using bootstrap, just look at how the modal is made there. It's very well done there. In a nutshell

    The modal comes with an overlay, that is, the modal class, when opened, has a position fixed, and full screen. That being said, overflow-y: auto. This is an overlay. And the modal itself is already in it, and if there is an overflow with content, then a scroll appears at the overlay. When opened at the body overflow hidden

  • 0
    body {overflow: hidden; }

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!