Запрет скроллинга при вызове модального окна

[NikroVir]

Сразу прошу прощения за то, что вообще не разбираюсь в js и jq. Нужно запретить скроллинг страницы (в том числе и стрелочками) при вызове модального окна, и соответственно разблокировать скроллинг при его закрытии.

Код, который я использую:

$(document).ready(function() { 
    $('a#go').click( function(event){ 
      event.preventDefault(); 
      $('#overlay').fadeIn(400, 
         function(){ 
            $('#modal_form')
            .css('display', 'block') 
            .animate({opacity: 1, top: '50%'}, 200); 
         });
      });
           
            /* Зaкрытие мoдaльнoгo oкнa */

    $('#modal_close, #overlay').click( function(){ 
      $('#modal_form')
     .animate({opacity: 0, top: '45%'}, 200, 
         function(){ 
             $(this).css('display', 'none'); 
             $('#overlay').fadeOut(400); 
         }
     );
   });
});

Если можно, помогите уже изменённым кодом, т.к. как говорил выше, вообще не разбираюсь в js и jq.
Спасибо.

 

[Absolute]

Попробуйте так:

$(document).ready(function() {
    $('a#go').click( function(event){
      event.preventDefault();
      $('#overlay').fadeIn(400,
         function(){
            $('#modal_form')
            .css('display', 'block')
            .animate({opacity: 1, top: '50%'}, 200);
         });
      $(document.body).css('overflow', 'hidden');
      });
           
            /* Зaкрытие мoдaльнoгo oкнa */

    $('#modal_close, #overlay').click( function(){
      $('#modal_form')
     .animate({opacity: 0, top: '45%'}, 200,
         function(){
             $(this).css('display', 'none');
             $('#overlay').fadeOut(400);
         }
     );
     $(document.body).css('overflow', 'auto');
   });
});

 

[NikroVir]

Попробуйте так:

$(document).ready(function() {
    $('a#go').click( function(event){
      event.preventDefault();
      $('#overlay').fadeIn(400,
         function(){
            $('#modal_form')
            .css('display', 'block')
            .animate({opacity: 1, top: '50%'}, 200);
         });
      $(document.body).css('overflow', 'hidden');
      });
          
            /* Зaкрытие мoдaльнoгo oкнa */

    $('#modal_close, #overlay').click( function(){
      $('#modal_form')
     .animate({opacity: 0, top: '45%'}, 200,
         function(){
             $(this).css('display', 'none');
             $('#overlay').fadeOut(400);
         }
     );
     $(document.body).css('overflow', 'auto');
   });
});

Спасибо за вариант, но он не подходит. Я уже экспериментировал с overflow. Он просто убирает скроллбар (в опере и всём остальном на движке хромиум. в лисе всё норм), но скроллить всё так же можно как колёсиком, так и стрелочками.

 

[latteo]

Спасибо за вариант, но он не подходит. Я уже экспериментировал с overflow. Он просто убирает скроллбар (в опере и всём остальном на движке хромиум. в лисе всё норм), но скроллить всё так же можно как колёсиком, так и стрелочками.

модал должен лежать внутри div, который растягивается на всё окно и отображается поверх всего (z-index: 1000; ) при открытии модального окна этот див становится видимым, при закрытии hiden

 

[NikroVir]

модал должен лежать внутри div, который растягивается на всё окно и отображается поверх всего (z-index: 1000; ) при открытии модального окна этот див становится видимым, при закрытии hiden

Я знаю по какому принципу строятся модальные окна. Проблема в том, что даже если вешать overflow:hidden на body, получается та же беда. Скроллбар исчезает, но скроллить можно. Проблемы нет в лисе

UPD: Понял в чём проблема. Прокрутка при overflow:hidden была из-за плагина smoothscroll. Вариант от Для просмотра ссылки Войди или Зарегистрируйся работает.

 

[Absolute]

Без скрытия полос прокрутки можно так:

$(document).ready(function() {
  var position = 0;
  var doc = $(document);
    $('a#go').click( function(event){
      event.preventDefault();
      $('#overlay').fadeIn(400,
         function(){
            $('#modal_form')
            .css('display', 'block')
            .animate({opacity: 1, top: '50%'}, 200);
         });
      position = doc.scrollTop();
      doc.on('scroll keydown mousewheel', function(e){
         if(e.keyCode == 38 || e.keyCode == 40 || e.type == 'mousewheel'){
           return false;
         }
         $(this).scrollTop(position);
       });
      });
          
            /* Зaкрытие мoдaльнoгo oкнa */

    $('#modal_close, #overlay').click( function(){
      $('#modal_form')
     .animate({opacity: 0, top: '45%'}, 200,
         function(){
             $(this).css('display', 'none');
             $('#overlay').fadeOut(400);
         }
     );
    doc.unbind('scroll keydown mousewheel');
    return false;
   });
});

 

[NikroVir]

Без скрытия полос прокрутки можно так:

$(document).ready(function() {
  var position = 0;
  var doc = $(document);
    $('a#go').click( function(event){
      event.preventDefault();
      $('#overlay').fadeIn(400,
         function(){
            $('#modal_form')
            .css('display', 'block')
            .animate({opacity: 1, top: '50%'}, 200);
         });
      position = doc.scrollTop();
      doc.on('scroll keydown mousewheel', function(e){
         if(e.keyCode == 38 || e.keyCode == 40 || e.type == 'mousewheel'){
           return false;
         }
         $(this).scrollTop(position);
       });
      });
         
            /* Зaкрытие мoдaльнoгo oкнa */

    $('#modal_close, #overlay').click( function(){
      $('#modal_form')
     .animate({opacity: 0, top: '45%'}, 200,
         function(){
             $(this).css('display', 'none');
             $('#overlay').fadeOut(400);
         }
     );
    doc.unbind('scroll keydown mousewheel');
    return false;
   });
});

Готов вас расцеловать. Всё замечательно работает, при чём даже с включённым плагином smoothscroll!

 

[Absolute]

Единственное, при закрытии окна будут удалены все обработчики 'scroll keydown mousewheel', которые могут использовать другие сценарии. Я как-то не подумал.
в jQuery метод unbind позволяет удалить конкретный обработчик, что будет более правильно. В общем выносим обработчик в scrollFix и код в итоге такой:

$(document).ready(function() {
  var position = 0;
  var doc = $(document);
  var scrollFix = function(e){
     if(e.keyCode == 38 || e.keyCode == 40 || e.type == 'mousewheel'){
      return false;
    }
    $(this).scrollTop(position);
  };
    $('a#go').click( function(event){
      event.preventDefault();
      $('#overlay').fadeIn(400,
         function(){
            $('#modal_form')
            .css('display', 'block')
            .animate({opacity: 1, top: '50%'}, 200);
         });
      position = doc.scrollTop();
      doc.on('scroll keydown mousewheel', scrollFix);
      });
          
            /* Зaкрытие мoдaльнoгo oкнa */

    $('#modal_close, #overlay').click( function(){
      $('#modal_form')
     .animate({opacity: 0, top: '45%'}, 200,
         function(){
             $(this).css('display', 'none');
             $('#overlay').fadeOut(400);
         }
     );
    doc.unbind('scroll keydown mousewheel', scrollFix);
    return false;
   });
});