Scrollable modal

Design help General
1

Hey folks,

I can’t seem to figure this one out. I tried using Waldo’s tutorial and still, no luck. Much of it I just don’t understand (custom code, switching classes etc.) so here I am.

Anyways, I’ve set up a modal and I need to make it scrollable on small screens. I’ve set an interaction on itemWork and that works fine. Closing the modal also works fine. However, when I check the modal on smaller screens:

  • I can’t see a big chunk of the content.
  • Modal is scrollable, but everything else behind the modal is also scrollable.

Any help with what am I doing wrong?

Also, don’t mind other popups, just modalContainer one as I need to clean up those too.

Thank you!

Read-Only: [https://preview.webflow.com/preview/umgb-wb-website?utm_source=umgb-wb-website&preview=efd57a64f992ca14bfc940151104cf2c]

Staging: [http://umgb-wb-website.webflow.io/]

2

Hi milanvuckovic,

Firstly, Epic design! That header photo is amazing.

This is a known issue with webfow modals, and based on a support ticket I had on this it is somewhere on webflow’s roadmap.

The solution is to use javascript.

Basically, you need to watch for when your modal is open with javascript, and then set the overflow for the <body> element to overflow-hidden whenever your modal is open.

It is pretty late here but in the morrow I’m happy to work through the solution I used if you like.

3

Hey @pi_ron that’d be amazing!

As for javascript, I tried labeling and adding ID of itemWork of open-modal and iconClose1 of close-modal and wrote this:

<script type="text/javascript">

$(document).ready(function() {
$('#open-modal')
    .css('cursor', 'pointer')
    .click(function(e) {
        e.preventDefault();
        $('body').css('overflow', 'hidden');
    });
$('#close-modal')
    .css('cursor', 'pointer')
    .click(function(e) {
        e.preventDefault();
        $('body').css('overflow', 'auto');
    });
});
</script>

That didn’t fix it, so any help appreciated! Thank you!

4

Most of the time you should give your modal height and overflow.
This is CSS issue (Styles).

.modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}

use custom code for overflow-y and overflow-x

image
image1271×590 300 KB

Last if you declare the content as position: fixed; no scroll (The text is sticky on mobile) - you get scroll but without any scrolling

In your case open new page and create a modal from zero.

1 Like
5

It’s still a bit unclear what exactly I should do, I’m sorry. :pensive:

Is there somewhere a step-by-step of doing what you wrote above?

1 Like
6

here, check out this site: http://body-essence.webflow.io and check out the About Page. highlight on any member face.

LMK, if that helps you.

7

Unfortunately, not really. But thanks! @QA_Brandon

8

hmmm. so what is it that you are trying to do with the modal then?

9

Here’s what’s happening on mobile:
https://www.dropbox.com/s/41gi5daxzqzykw6/Kapture%202018-11-14%20at%2018.12.53.mp4?dl=0

I can scroll stuff outside modal and the top of the content is cut out for some reason.

What I wanna do is make it scrollable, then prevent stuff outside (or behind it) to scroll and all content inside the modal visible. How does one do all that?

1 Like
10

@milanvuckovic I see your issue.

You are trying to scroll your whole modal instead of just the content blocks themselves.

Set the content block, class name=“modalGrid” to Auto Scroll. That hopefully should fix your issue.

Try setting the “modalContent” to Flex Vertical and height to 100VH.

11

Nope, that didn’t do it either. Mind if you jump in and take a closer look?

https://preview.webflow.com/preview/umgb-wb-website?utm_source=umgb-wb-website&preview=efd57a64f992ca14bfc940151104cf2c

This is what I’m trying to achieve (took a screenshot so I could showcase exactly what I’m trying to do, nevermind the X icon):
https://www.dropbox.com/s/arg03v3c9baenk6/Kapture%202018-11-14%20at%2018.39.28.mp4?dl=0

12

Just make the scrollbars to auto in the content container. Am I missing something?

You also don’t need to use custom code for modals, it can be done with interactions. Creating a custom modal - YouTube

1 Like
14

@DFink Dave, I brought that up before, but was stated thats not it. I havent found a solution, yet.

1 Like
15

I’ll let you handle it then! Thank you!

1 Like
16

Hi Guys I think the issue is, even if a modal is created and overflow styled correctly, and scrolls as expected, the background (body) scrolls behind the modal – It usually happens once you scroll and the modal and reach the end of it’s content, the background starts scrolling.

Unfortunately this can’t be fixed without custom code.

@milanvuckovic check in on this forum post: How to prevent body from scrolling when modal window open

17

Hey folks, I managed to do what I wanted, but it involved custom code and a lotta thinking haha. I went back to the start and this is what I did.

This is my structure:

21

1. modal (with combo-class that controls z-index only cause I wanna do interaction on other popups too… visibility goes to display: hidden when I wanna hide it to see everything else, ofcourse):

29
29239×1195 32.5 KB

2. iconClose1

33
33240×863 23.1 KB

3. modalCon

12
12237×973 27.7 KB

4. modalGrid (you put all of the content in this, margins are just a personal preference too)

24
24239×947 27.7 KB

I’ve also put IDs on itemWork which opens my modal and iconClose1 which closes my modal.

iconClose1

47

itemWork

28

Custom code I used and adjusted a bit:

<script type="text/javascript">

    $(document).ready(function() {
      $('#open-modal')
        .css('cursor', 'pointer')
        .click(function(e) {
          e.preventDefault()
          $('body').addClass('no-scroll')
        })
      $('#close-modal')
        .css('cursor', 'pointer')
        .click(function(e) {
          e.preventDefault()
          $('body').removeClass('no-scroll')
        })
    })

</script> 

<style>

      .overflow-hidden {
        overflow: hidden;
      }
      
      .no-scroll {
        pointer-events: none;
        overflow: hidden;
      }

      .no-scroll .modal {
        pointer-events: all;
      }
      
     .modalcon {
       -webkit-overflow-scrolling: touch
    }

</style>

So there’s that! I guess we can close this thread now. Thank you all for your help, you’re amazing!

3 Likes
18

Sounds good. Just remember to hit the Solution checkbox to finalize this thread.

Good job tho.

19

Nice work @milanvuckovic

20

Was seeing if you could help us out?

Changed our modals to match your naming convention and pasted the code in ‘page’ head and I think we’re missing something because it didn’t work…

Here is our thread with read-only, link : Scroll Pop Up Window : Not Working... How?

21

My site has 2x full page dialogs and when I scroll to the bottom we have the body scrolling behind.

Please send help. I have tried all the code snippets but still not working.