Как отключить скролл на странице при открытом модальном окне?

Question

[topuserman]

Такая проблема:

когда открывается всплывающее окно на сайте, то сам сайт можно скроллить до самого футера..
Нужно отключить эту функцию.
Попробовал сделать так:

body { position: fixed; } - при открытой форме.

Но проблема в том, что иногда высота формы выше высоты экрана, и нужно иметь возможность докрутить страницу до конца формы.

Т.е. ожидаемый результат, что страницу можно будет скролить, но только до конца высоты веб-формы.
Как можно это решить ?

PS bootstrap не использую.

Answer 1

[Антон Литвиненко]

Вы бутстрап не используете, просто посмотрите как там сделана модалка. Там очень хорошо сделано. В двух словах
Модалка идёт вместе с оверлеем, то есть класс модал при открытии имеет позишн фиксед, и на весь экран. При этом overflow-y: auto. Это оверлей. А в нем уже лежит сама модалка, и если идёт переполнение контентом то у оверлея появляется скролл. При открытии у боди оверфлоу хидден

Answer 2

[YavaDev]

body { overflow: hidden; }

Comments

[topuserman]

в этом случае перестает прокручиваться форма.

[Alex]

topuserman, Значит нужно вешать не на body а на какой-то контейнер для контента но в который не входит сама модалка

[Ankhena]

topuserman, ограничьте высоту формы (или ее обертки), чтобы у нее был собственный скролл.

[YavaDev]

Какая форма? Та которая находится в модальном окне? Тогда сделайте так, что бы скролилось содержимое модального окна.