Streaming live at 10am (PST)

Scrollable modal


#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

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.


#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?


#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! @WebDev_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?


#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. https://www.youtube.com/watch?v=DuZ_FC-iPPI


#14

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


#15

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


#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):

2. iconClose1

3. modalCon

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

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!


#18

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

Good job tho.


#19

Nice work @milanvuckovic