Scrolling only the distance of a modal on smaller screens with media queries

Question

I have a modal that pops up on an onclick event. Basically it adds a greyed out layer over the page, then adds a modal div one z-index higher over the grey. The problem I am running into is for smaller screen sizes you can scroll down the body.

I have tried toggling body { overflow:hidden }

this works except for when the modal has more content that needs to be seen that exceeds the initial view. Ideally you would be able to see only the modal on smaller screens and scroll down it if needed. Thanks.

Answer 1

Here's my attempt.

HTML

<div class = "popup">
    <div class = "over"></div>
    <div class = "window">
        <button class = "close">Close</button>
        <p>Filler</p>
        <p>Filler</p>
        <p>Filler</p>
        <button class = "close">Close</button>
    </div>
</div>

<div class = "content">
    <p>Filler</p>
    <button class = "pop">Popup</button>
    <p>Filler</p>
    <p>Filler</p>
    <button class = "pop">Popup</button>
    <p>Filler</p>
</div>

CSS

body {
    margin:0;
}

p {
    margin:0;
    height:200px;
    background-color:yellow;
}

.popup {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:none;
    z-index:1;
}

.over {
    width:100%;
    height:100%;
    background-color:gray;
    opacity:0.5;
    position:absolute;
    z-index:-1;
}

.window {
    border:1px solid black;
    width:50%;
    height:100%;
    overflow:auto;
    margin:0 auto;
    background-color:orange;
}

.content.paused {
    position:fixed!important;
    width:100%;
    height:1000%;
    overflow:hidden;
    z-index:0;
}

JQUERY

var scroll;

$('.pop').click (function () {
    scroll = $(document).scrollTop ();
    $('.popup').show ();
    $('.content').offset ({top:-scroll}).addClass ('paused');
});

$('.close').click (function () {
    $('.popup').hide ();
    $('.content').removeClass ('paused').removeAttr ('style');
    $(document).scrollTop (scroll);
});

This requires the page content to be inside a div that is separate from the popup. When you click the button, the current scroll position is saved, then the page content is positioned fixed and moved above the top of the page by the same amount as the scroll. So if you scrolled down 100px, the top of the content will be 100px above the top of the screen, to preserve the visual position of the content. The content will no longer be scrollable because I set the height to be insanely large.

The popup will just be any regular div, with a max height and scrollbars if needed.

When you close the popup, the page content is restored to its original state, the fixed position is removed, top displacement removed, and the page's scroll position is set back to what it was before.

Answer 2

Try to add these attributes to your modal container div:

.modalContainer{ 
    max-width: 500px;  //maximum width of the size of the modal
    position: relative;
    width: 85%;  //can be how much of the screen you want it to take up
}