CODEWITHSUNDEEP
jquerycssscrollmodal-dialog
Nils
Nils

Reputation: 211

Scroll Modal, Not Body

Before you direct me to a previously answered question: I am NOT using Bootstrap, and I'm not currently using jQuery for my modal windows.

I'm using this pure HTML/CSS modal. I want to be able to scroll through a vertically long modal (but not past it), ideally while preventing the rest of the page from scrolling along with it. Right now the parent class of the modal is set to "position: fixed"; I'm guessing the fix involves changing it to "absolute", but beyond that I'm pretty clueless.

The only thing I can think of (jQuery-wise) is a condition based on modal opacity, so that when there's a visible modal, it's only possible to scroll down to the end of the modal div (based on its position from the top + height). It's not perfect, but it's only a minor setback since length-wise I know it'll still roughly coincide with the section the links are in (I won't reach the footer by scrolling down my modal, is what I mean). I'm sure there's a smarter way to do it, though. I'm not super familiar with jQuery syntax, so I'd really appreciate if suggestions came with bits of code.

Alternately, feel free to point me to alternate options for modal windows. I'm not against jQuery-based ones if they're light and simple enough. I really want to avoid Bootstrap as much as possible, though.

EDIT: Sample code illustrating the problem.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<style>
body {
    height: 4000px;
}

.modalDialog {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 1040;
    opacity:0;
    transition:         opacity 0.3s ease-in;
    -webkit-transition: opacity 0.3s ease-in;
    -moz-transition:    opacity 0.3s ease-in;
    -o-transition:      opacity 0.3s ease-in; 
    pointer-events: none;
}

.modalDialog > div {
    color: #ffffff;
    height: 2000px;
    position: relative;
    top: 0;
    margin: 2.5%;
    padding: 10px;
    background: #000000;
    z-index: 1050;
}

.modalDialog:target {
    opacity:1;
    pointer-events: auto;
}

</style>

</head>

<body>
    <a href="#modal">Open the modal window</a>

    <div id="modal" class="modalDialog">
        <div>This is the modal window</div>
    </div>

</body>
</html>

Upvotes: 1

Views: 8625

Answers (1)

Nils
Nils

Reputation: 211

Figured it out! Thanks wallek876 for nudging me in the right direction with the overflow property.

  • Modal window parent class needs "position:fixed" and "overflow-y:auto".
  • "Open" and "close" links need respective classes that can be called.
  • Using jQuery, it's possible to toggle the overflow of the body based on which link is clicked (disable scrolling when modal is open, enable scrolling when modal is closed).

The specific jQuery:

$(document).ready(function() {
  $('.openModal').click(function() { 
    $('body').css('overflow', 'hidden');
  });
$('.close').click(function() { 
    $('body').css('overflow', 'auto');
  });
});

Here's the edited example, for context:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<style>

    body {
        height: 4000px;
    }

    a:link, a:visited, a:hover, a:active {
        color: #ff0000;
    }

    .modalDialog {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0,0.8);
        z-index: 1040;
        opacity:0;
        overflow-y: auto;
        transition:         opacity 0.3s ease-in;
        -webkit-transition: opacity 0.3s ease-in;
        -moz-transition:    opacity 0.3s ease-in;
        -o-transition:      opacity 0.3s ease-in; 
        pointer-events: none;
    }

    .modalDialog > div {
        color: #ffffff;
        height: 2000px;
        position: relative;
        top: 0;
        margin: 2.5%;
        padding: 10px;
        background: #000000;
        z-index: 1050;
        border: 2px #ff0000 solid;
    }

    .modalDialog:target {
        opacity:1;
        pointer-events: auto;
    }

</style>

</head>

<body>

<script>
    $(document).ready(function() {
      $('.openModal').click(function() { 
        $('body').css('overflow', 'hidden');
      });
    $('.close').click(function() { 
        $('body').css('overflow', 'auto');
      });
    });
</script>

    <a href="#modal" class="openModal">Open the modal window</a>

    <div id="modal" class="modalDialog">
        <div><a href="#close" class="close">Close the modal window</a></div>
    </div>

</body>
</html>

Upvotes: 4

Related Questions