Scrollable modal

Design help General
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