Скрыть прокрутку страницы тела, когда модальное окно открыто

Question

Можно ли убрать прокрутку страницы тела, когда модальное окно открывается из css?
Например, моя страница тела имеет высоту: 200%, поэтому, если я хочу перейти в конец страницы, я должен использовать прокрутку (overflow-y: auto). Теперь, если я открою модальное окно, прокрутка страницы тела остается активной, и я хочу, чтобы она была отключена при открытии модального окна.

Спасибо.

Answer 1

Если вы открываете модальное окно при нажатии на ссылку, вы можете сделать следующее:

// modal screen activate
$('a').live('click', function(){
modalScreen.show();
$('body').css('overflow','hidden');
});

// modal screen de-activate
$('body, html').live('click', function(){
modalScreen.hide();
$('body').css('overflow','auto');
});

Answer 2

Или просто добавьте и удалите классы в свой скрипт:

$('body').addClass('modal-open'); //when modal is open
$('body').removeClass('modal-open'); //when modal is closed

Затем вы можете перейти к вашему CSS-файлу и добавить несколько стилей CSS. Для скрытия полосы прокрутки используйте:

.modal-open {
overflow: hidden;
}

Особенно, если вы хотите изменить больше вещей, я предпочитаю таким образом, но это мое мнение. Используйте все, что вам нравится!

Answer 3

Используйте position:fixed и установите left и top в процентах, затем margin-left в отрицательное значение ширины в пикселях.например, width: 700px; left: 50%, margin-left: -350px; для центрирования по горизонтали.

Answer 4

Я предполагаю, что вы открываете свое световое окно, используя javascript:

Вы могли бы просто установить высоту тела на 100% и установить для overflow-y скрытый.Это удалит полосу прокрутки.

Вам нужно будет сбросить все настройки при закрытии светового окна.