Popup window not scrollable

Question

I know this is probably a basic question, but I've tried every solution out there and I can't seem to get my popup window to scroll vertically.

So I have a 'p' element that an individual can click on and show several reviews. The window pops open, however, the text within the popup window extends beyond the bottom without it being scrollable.

Any help to get the window scrollable is appreciated.

 var modal = document.getElementById('myModal'); var btn = document.getElementById('myBtn'); var span = document.getElementsByClassName('close')[0]; btn.onclick = function() { modal.style.display = "block"; } span.onclick = function() { modal.style.display = "none"; } window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } 

 .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0.4); } .modal-content { background-color: #fefefe; margin: 15% auto; padding: 20px; overflow: auto; border: 1px solid #888; width: 80%; } .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; } 

 <p id="myBtn">See what our customers are saying</p> <div id="myModal" class="modal"> <div class="modal-content"> <span class="close">&times;</span> <p>...</p> <p>...</p> <p>...</p> <p>...</p> </div> </div> 

Answer 1

 var modal = document.getElementById('myModal'); var btn = document.getElementById('myBtn'); var span = document.getElementsByClassName('close')[0]; btn.onclick = function() { modal.style.display = "block"; } span.onclick = function() { modal.style.display = "none"; } window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } 

 .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0.4); } .modal-content { background-color: #fefefe; margin: 15% auto; padding: 20px; overflow: auto; border: 1px solid #888; width: 80%; } .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; } .close{ position:fixed; position: fixed; right: 70px; top: 115px; } .modal-content{ height:100px; overflow-y:scroll; } 

 <p id="myBtn">See what our customers are saying</p> <div id="myModal" class="modal"> <div class="modal-content"> <span class="close">&times;</span> <p>...</p> <p>...</p> <p>...</p> <p>...</p> </div> </div> 

is this right ?

Answer 2

You only need to add an specific height in your modal-content class (50% for example):

https://jsfiddle.net/8p0moxjz/

Answer 3

Try adding overflow-y:scroll; to your modal-content css. This will allow scrolling along the y-axis (vertically).

Answer 4

Modal scroll

Maybe this fiddle can help you.

I just added height into 'modal-header' and 'modal-content'.

Also move border from 'modal-content' into 'modal'.

If you add 'modal header' class, you can see close button always.