Добрый вечер.
Только изучаю 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