Показать сообщение отдельно
  #1 (permalink)  
Старый 12.04.2017, 21:44
Интересующийся
Отправить личное сообщение для TommyWork Посмотреть профиль Найти все сообщения от TommyWork
 
Регистрация: 12.04.2017
Сообщений: 15

Модальное окно, запретить скролл всему документу на чистом JS
Добрый вечер.

Только изучаю JS, реализовал на чистом JS всплывающие окна с полным функционалом, но не могу запретить сролл всего документа во время скролла модального окна.


<style type="text/css">
.black_window {
       display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	filter: alpha(opacity=0)
	 -moz-opacity: 0;
	opacity: 0;
	z-index: 2;
}
.content {
position: relative;
	width: 60%;
	max-width: 550px;
	min-height: 300px;
	margin: 0 auto;
	z-index: 3;
	filter: alpha(opacity=100)
	 -moz-opacity: 1;
	opacity: 1;
}
</style>

<ul>
    <li>Ссылка на 1 окно</li>
    ...
    <li>Ссылка на последнее окно</li>
</ul>

<div class="size_window">
    <div class="black_window">
        <div class="content">Ссылка на 1 окно</div>
        ...
        <div class="content">Ссылка на последнее окно</div>
    </div>
</div>


.size_window - это высота всплывающего окна которую принимает div (.main_block), в который обернут весь сайт, когда модальное окно открыто, и ему я присваиваю overflow:hidden;
.black_window - затемнитель фиксированный.
.content - тело окна с высотой в зависимости от контента внутри.

Скролить .content могу привязав к обработчику события скрола через свойство top, при position:relative блока content.

var scrolled = window.pageYOffset || document.documentElement.scrollTop;
if(parseInt(window.getComputedStyle(main_block, null).height) - window.innerHeight - scrolled) > 0)){
        	content.style.top = -scrolled + 35 + 'px';
        	main_block.style.top = scrolled + 'px';
    	}


Когда скролл подходит к концу страницы, main_block уезжает вверх,
не знаю как иначе запретить скролл основного контента на чистом JS
Ответить с цитированием