CODEWITHSUNDEEP
javascripthtmlcss
AHH
AHH

Reputation: 281

stop scrolling on body when modal is open and allow scroll on modal divs

When I open a modal I can scroll down to the body of the page but I can't scroll down the modal to see all the data (only the background site is scrolling), any idea how to stop scrolling on the background body but allow scrolling on the modal itself?

this is my css:

.modal-mask {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    width: 100%;
    height: 10000px;
    background-color: /* rgba(0, 0, 0, .5); */rgba(43, 46, 56, 0.9);
    transition: opacity .3s ease;

}


.modal-container {
    box-sizing: border-box;
    width: 75%;
    z-index: 10000;
    /* max-height: 650px; */
    overflow: auto;
    margin: 0px auto 0;
    padding: 20px 30px;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
    transition: all .3s ease;
    font-family: Helvetica, Arial, sans-serif;
    -webkit-overflow-scrolling: touch;

}

modal html:

<div class="modal-mask" @click="$emit('close')" v-show="show" transition="modal">
        <div @click.stop class="modal-container">

            <button @click="$emit('close')"><i class="fa fa-chevron-left" aria-hidden="true"></i>
            </button>
            <div class="modal-header">
                <h2>Title</h2>
            </div>

            <div class="modal-body">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>

            <div class="modal-footer text-right">
                <!-- <button class="modal-default-button">
                    Close
                </button> -->
            </div>
        </div>
    </div>

I tried adding overflow:hidden to the body when the modal is opened and it does cancel the scrolling on the body but still doesn't give me scrolling on the modal

Upvotes: 0

Views: 22435

Answers (2)

Zac Webb
Zac Webb

Reputation: 663

Using jQuery/JS to modify the body's overflow when the modal is opened, you can make it so the page will stop scrolling, and the modal will still be scrollable.

The key aspects of this solution are:

  • The modal has overflow: scroll; set.
  • The body is set to overflow: hidden; when the modal is opened.

I mocked up a very simple example, see below:

$('.click').click(function(){
  $('.modal').show();
  $('body').css("overflow", "hidden");
});
.content {
  height: 700px;
  width: 100%;
  background: grey;
}

.click {
  background: blue;
  cursor: pointer;
}

.modal {
  position: absolute;
  width: 100px;
  height: 100px;
  background: red;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  overflow: scroll;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="content">
  This is the main content that scrolls until the modal is opened.
  <div class="click">Click me to open modal</div>
  <div class="modal">This is a modal that requires me to scroll down on hence there is a lot of placeholder text in here that I am having to type man I should've used Lipsum.</div>
</div>

Let me know if you need any other help.

Upvotes: 2

PRAISER
PRAISER

Reputation: 803

You can set the body's style to overflow: hidden this makes the scroll go away, then all you need is to make your modal inside of a div that its overflow is scroll or auto and basically make the model scrollable. Remember the modal parent should be position: fixed and its width and height should be 100%.

Upvotes: 1

Related Questions