Fullpage.js: Disable scrolling when Bootstrap modal opened

[rubaff]

Is it possible to disable scrolling of sections when a Bootstrap modal is opened? Bootstrap will add the class .modal-open to the body. Maybe we can work with that?

Thanks, r!

[alvarotrigo]

Use the option normalScrollElements for it. Read more in the docs.

[rubaff]

normalScrollElements: '.modal'

(plus http://stackoverflow.com/questions/9538868/prevent-body-from-scrolling-when-a-modal-is-opened)

...did the job! Thanks for the quick reply!

[areddyprasad]

Excellent @alvarotrigo ... It works like a charm...

[Giegling]

It works like a charm when scrolling, but when modal is open and I can still scroll with arrow down and up buttons.

[raphaelrpais]

For the record, works fine with MDL's dialog also.

[Giovancruz]

Maybe this will solve:

$('.modal').on('show.bs.modal', function () {
    $("body").css('overflow', 'hidden');
}).on("hidden", function () {
        $("body").css('overflow', 'auto');
});

[pascarel]

it's not working on mobile devices, please can you help me !!!

[NimbusSoftware]

That worked for me

[imbalar]

Maybe this will solve:

$('.modal').on('show.bs.modal', function () {
  $("body").css('overflow', 'hidden');
}).on("hidden", function () {
        $("body").css('overflow', 'auto');
});

but all content jump when open model.

[omguddu100]

if you using niceScroller then ... it will work....

var bModal = $('#basicModal'); var bModalBody = bModal.find('.modal-body'); bModal.on('shown.bs.modal', function(e){ bModalBody.niceScroll({ touchbehavior: true, autohidemode:false }); }).on('hide.bs.modal', function(e){ bModalBody.niceScroll().remove(); });