JavaScript « Подложка для диалогового окна, фиксирующая прокрутку страницы

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

1 ответов


Запрет скролла на javascript'e


$(document).mousewheel(function(e, delta) {
  return false;
});
var ar=new Array(33,34,35,36,37,38,39,40);
$(document).keydown(function(e) {
     var key = e.which;
      if($.inArray(key,ar) > -1) {
          return false;
      }
      return true;
});
 

Проще CSS:

body {
overflow-y:hidden;
}
 

Лучше не запрещать скролл, а выводить модальное окно как fixed.
Для подложки можно использовать готовый blockUI


В вашем случае решением будет использование плагина arcticModal.
Внешний вид легко кастомизируется на 100% и имеется функционал скрытия скроллбара при открытии диалога.


Принцип прост:
— запоминаем на сколько была страница прокручена (а может даже это вообще не нужно будет)
— делаем html и body высотой в 100% и overflow:hidden — тут уже ничего не сможет прокрутиться и не нужно будет городить Яваскрипты, которые считывают нажатые клавиши и не дают прокрутить страницу ими
— сама подложка будет высотой 100%, табличным отображением с горизонтальным выравниванием сожержимого (чтобы попап был в центре), position:fixed и overflow:auto — для того, чтобы можно было внутри неё прокручивать, если содержимое попапа будет большим
— при закрытии попапа убираем с html и body класс со стилями из первого пункта и, скорее всего, даже не надо будет скроллить на изначальную позицию, которую мы во втором пункте запомнили, а может надо будет, не суть.