How to add scroll within a modal?

[PChalk1 (Philip)]

Hello,

I’ve created a modal which is a bit too long for tablet/mobile.

The background scroll doesn’t bother me, but I’d like to scroll in mobile/tablet modes so that I can see the full modal content.

Is there any way to do this?

Thanks!

[vlogic (Robert Henry)]

This post in the creating a modal window thread may help answer you question:

Continuing the discussion from [Tutorial] How to create a modal/pop-up in Webflow:

@thunder

Hey folks,

Wanted to share the code I’m using, which rolls up a few of the tweaks above and adds a few of my own, in case anyone wanted to copy-paste it:

    $(document).ready(function() {
    $('.modal-link')
        .css('cursor', 'pointer')
        .click(function(e) {
            e.preventDefault();
            $('.modal-background').fadeIn();
            $('body').css('overflow', 'hidden');
        });
    $('.close-modal')
        .css('cursor', 'pointer')
        .click(function(e) {
            e.preventDefault();
            $('.modal-background').fadeOut();
            $('body').css('overflow', 'auto');
        });
});

You’ll note: the links that open/close the modal get a pointer cursor, so if you have a regular text div open/close the popup it’ll feel actionable. Also, I tweak the overflow of ‘body’ while the popup is open, so that only popup content will be scrollable.

I use a fixed window (not just the background) with fixed height/width of 70% and move it left/down 15% (so it’s centered), then set overflow:scroll. That means that I can add more content and it’ll just be scrollable. Note that this means you need to fix the window’s close button as well, I just move it down/left 16% so it appears in the top-right corner of the window regardless of scroll.

Hope this helps some of you.