zurb/reveal

Lock vertical page scrolling when modal is visible

mapk opened this issue · 4 comments

mapk commented

Is there a way to lock the vertical page scrolling when modal window is visible?

mapk commented

I just changed the .reveal-modal position from "absolute" to "fixed". The background still can be scrolled, but the modal stays fixed within view, so it should still work.

aam1r commented

@mapk: 👍

iftkhar commented

is there any method to stop page scrolling when modal window is active?

alexfedor1026 commented

// in script file

$(document).on('open.fndtn.reveal', '[data-reveal]', function() {
    var modal = $(this);
    $(document.body).addClass('is-reveal-open');
});

$(document).on('opened.fndtn.reveal', '[data-reveal]', function() {
    var modal = $(this);
    $(document.body).addClass('is-reveal-open');
});

$(document).on('close.fndtn.reveal', '[data-reveal]', function() {
    var modal = $(this);
    $(document.body).removeClass('is-reveal-open');
});

$(document).on('closed.fndtn.reveal', '[data-reveal]', function() {
    var modal = $(this);
    $(document.body).removeClass('is-reveal-open');
});

// in css file
body.is-reveal-open {
overflow: hidden;
}

Good luck

  • 👍1