Why I can not scroll on my overlay? - html

Question

When I scroll on screen, everything is good.
When I click on my button, there is a overlay show up.
However, I can still scroll the div under my overlay, what i want is only to scroll my overlay.
$('#addCustomerBtn').on('click', function() {
// window.location.href = "http://dev.rabbijet.com/crm/create.html";
var modal = document.getElementById('myModal');
modal.style.display = "block";
})
body {
overflow: auto;
}
.black {
height: 200px;
width: 800px;
background-color: black;
}
.gray {
height: 200px;
width: 800px;
background-color: gray;
}
.green {
height: 700px;
background-color: green;
}
.yellow {
height: 700px;
background-color: yellow;
}
#addCustomerBtn {
font-size: 14px;
width: 120px;
border: 1px solid #20ACB3;
background-color: #20ACB3;
}
#myModal {
display: none;
position: fixed;
/* Stay in place */
z-index: 999;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
background-color: rgba(0, 0, 0, 0.4);
}
#create-form {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background-color: #000;
width: 500px;
height: 1500px;
background-color: red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="btn btn-primary" id="addCustomerBtn">Click</div>
<div class="black"></div>
<div class="gray"></div>
<div class="black"></div>
<div class="gray"></div>
<div class="black"></div>
<div class="gray"></div>
<div class="black"></div>
<div class="gray"></div>
<div class="black"></div>
<div class="gray"></div>
<div class="black"></div>
<div class="gray"></div>
</div>
<div id="myModal">
<div id="create-form">
<div class="green"></div>
<div class="yellow"></div>
</div>
</div>

Answer 1

Add overflow-y: scroll; to your modal class in the CSS.
$('#addCustomerBtn').on('click', function() {
// window.location.href = "http://dev.rabbijet.com/crm/create.html";
var modal = document.getElementById('myModal');
modal.style.display = "block";
})
body {
overflow: auto;
}
.black {
height: 200px;
width: 800px;
background-color: black;
}
.gray {
height: 200px;
width: 800px;
background-color: gray;
}
.green {
height: 700px;
background-color: green;
}
.yellow {
height: 700px;
background-color: yellow;
}
#addCustomerBtn {
font-size: 14px;
width: 120px;
border: 1px solid #20ACB3;
background-color: #20ACB3;
}
#myModal {
display: none;
position: fixed;
overflow-y: scroll;
/* Stay in place */
z-index: 999;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
background-color: rgba(0, 0, 0, 0.4);
}
#create-form {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background-color: #000;
width: 500px;
height: 1500px;
background-color: red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="btn btn-primary" id="addCustomerBtn">Click</div>
<div class="black"></div>
<div class="gray"></div>
<div class="black"></div>
<div class="gray"></div>
<div class="black"></div>
<div class="gray"></div>
<div class="black"></div>
<div class="gray"></div>
<div class="black"></div>
<div class="gray"></div>
<div class="black"></div>
<div class="gray"></div>
</div>
<div id="myModal">
<div id="create-form">
<div class="green"></div>
<div class="yellow"></div>
</div>
</div>

Answer 2

This answer is very rough, but basically what you do is allow overflow on the modal container, and when the button is clicked you disallow overflow on the parent container. When you close the modal, remember to remove the .overflow-hidden class I made from the document body. Also, if you are using jQuery use it. It is popular because it makes many things, like applying styles, easier.
$('#addCustomerBtn').on('click', function() {
// window.location.href = "http://dev.rabbijet.com/crm/create.html";
var modal = $('#myModal');
modal.css('display','block');
$(document.body).toggleClass('overflow-hidden');
})
body {
overflow: auto;
}
.overflow-hidden {
overflow: none;
}
.black {
height: 200px;
width: 800px;
background-color: black;
}
.gray {
height: 200px;
width: 800px;
background-color: gray;
}
.green {
height: 700px;
background-color: green;
}
.yellow {
height: 700px;
background-color: yellow;
}
#addCustomerBtn {
font-size: 14px;
width: 120px;
border: 1px solid #20ACB3;
background-color: #20ACB3;
}
#myModal {
display: none;
position: absolute;
/* Stay in place */
z-index: 999;
/* Sit on top */
left: 0;
top: 0;
bottom: 0;
/* Full width */
right: 0;
/* Full height */
background-color: rgba(0, 0, 0, 0.4);
overflow: auto;
}
#create-form {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background-color: #000;
width: 500px;
height: 1500px;
background-color: red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="btn btn-primary" id="addCustomerBtn">Click</div>
<div class="black"></div>
<div class="gray"></div>
<div class="black"></div>
<div class="gray"></div>
<div class="black"></div>
<div class="gray"></div>
<div class="black"></div>
<div class="gray"></div>
<div class="black"></div>
<div class="gray"></div>
<div class="black"></div>
<div class="gray"></div>
</div>
<div id="myModal">
<div class="close-button">X</div>
<div id="create-form">
<div class="green"></div>
<div class="yellow"></div>
</div>
</div>