Запретить прокрутку фона при открытии лайтбоксов

Question

Я использую Featherlight как, лайтбоксы. Одна из проблем, с которой я столкнулся, - это открыть ее, фон остается прокручиваемым. Исправление, которое требуется большинству лайтбоксов, - это добавление класса к телу с помощью overflow:hidden;.

Как я могу это сделать при открытии лайтбокса, а затем удалить класс при закрытии?

Answer 1

Вы можете использовать опции вашего плагина вызова с помощью из beforeOpen и afterClose варианты, как:

$.featherlight({ 
    beforeOpen: function() { 
     document.body.style.overflow = 'hidden'; 
    }, 
    afterEnd: function() { 
     document.body.style.overflow = ''; 
    } 
}); 

Answer 2

Вы можете попробовать следующие шаги:

1) Добавить новый класс CSS, как:

.bodyNoOverflow{ 
    overflow:hidden; 
} 

2) Измените конфигурацию инициализации виджета Featherlight и измените параметры beforeOpen и beforeClose функция обратного вызова, как:

beforeOpen: function(event){ 

    $("body").addClass("bodyNoOverflow"); 
    //existing code if any 
}, 

beforeClose: function(event){ 

    $("body").removeClass("bodyNoOverflow"); 
    //existing code if any 
},