Lock Background when modal is open

Question

I'd like to know how to lock the background when a modal is open. All the answers I've seen on here are related to bootstrap modals. This is one I grabbed from W3.

The modal would have more content within it. With that said, the modal will be scrolling vertically and the background content will stay static (when the modal is open).

https://jsfiddle.net/p8aw4fer/

  // Get the modal var modal = document.getElementById('detailmodal'); // Get the button that opens the modal var btn = document.getElementsByClassName("modalbutton"); // Get the <span> element that closes the modal var span = document.getElementsByClassName("close"); // When the user clicks the buttons open the modal for (let i = 0; i < btn.length; i++) { btn[i].onclick = function() { document.getElementsByClassName('modal')[i].style.display = "block"; } } for (let i = 0; i < span.length; i++) { // When the user clicks on <span> (x), close the modal span[i].onclick = function() { document.getElementsByClassName('modal')[i].style.display = "none"; } } // When the user clicks anywhere outside of the modal, close it for (let i = 0; i < window.length; i++) { window[i].onclick = function(event) { if (event.target == modal) { document.getElementsByClassName('modal')[i].style.display = "none"; } }} 

  /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: hidden; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } .textinside{ font-size: 40px; } /* Modal Content */ .modal-content { padding: 1.25rem; position: relative; overflow: auto; float: right; background-color: #fff; margin: auto; border: 1px solid #888; max-width: 250px; width: 100%; height: 100%; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); -webkit-animation-name: animatetop; -webkit-animation-duration: 0.4s; animation-name: animatetop; animation-duration: 0.8s; } /* Add Animation */ @-webkit-keyframes animatetop { from {right:-100px; opacity:0} to {right:0; opacity:1} } @keyframes animatetop { from {right:-100px; opacity:0} to {right:0; opacity:1} } /* The Close Button */ .close { color: #7F7F7F; font-size: 3rem; float: right; top: 0; } .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; } 

  <button class="modalbutton"><a href="#">CLICK ME :)</a></button><br> <div class="textinside"> Here as place holder to see the locked background<br> Here as place holder to see the locked background<br> Here as place holder to see the locked background<br> Here as place holder to see the locked background<br> Here as place holder to see the locked background<br> Here as place holder to see the locked background<br> Here as place holder to see the locked background<br> Here as place holder to see the locked background<br> Here as place holder to see the locked background<br> Here as place holder to see the locked background<br> </div> <div class="modal"> <div class="modal-content"> <div class="modal-header"> <span class="close">&times;</span> <h2>2 Modal Header</h2> </div> <div class="modal-body"> <p>please link with 2</p> <p>Some other text...</p> </div> <div class="modal-footer"> <h3>Modal Footer</h3> </div> </div> </div> 

Answer 1

The trick here is to set the overflow of the body to hidden when the modal is available, and then reset the rule when the modal is hidden. Added more text to the snippet to show this more effectively.

 // Get the modal var modal = document.getElementById('detailmodal'); // Get the button that opens the modal var btn = document.getElementsByClassName("modalbutton"); // Get the <span> element that closes the modal var span = document.getElementsByClassName("close"); // When the user clicks the buttons open the modal for (let i = 0; i < btn.length; i++) { btn[i].onclick = function() { document.getElementsByClassName('modal')[i].style.display = "block"; document.body.classList.add('overflowHidden'); } } for (let i = 0; i < span.length; i++) { // When the user clicks on <span> (x), close the modal span[i].onclick = function() { document.getElementsByClassName('modal')[i].style.display = "none"; document.body.classList.remove('overflowHidden'); } } // When the user clicks anywhere outside of the modal, close it for (let i = 0; i < window.length; i++) { window[i].onclick = function(event) { if (event.target == modal) { document.getElementsByClassName('modal')[i].style.display = "none"; document.body.classList.remove('overflowHidden'); } } } 

 /* The Modal (background) */ .overflowHidden { overflow: hidden !important; } .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: hidden; /* Enable scroll if needed */ background-color: rgb(0, 0, 0); /* Fallback color */ background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */ } .textinside { font-size: 40px; } /* Modal Content */ .modal-content { padding: 1.25rem; position: relative; overflow: auto; float: right; background-color: #fff; margin: auto; border: 1px solid #888; max-width: 250px; width: 100%; height: 100%; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); -webkit-animation-name: animatetop; -webkit-animation-duration: 0.4s; animation-name: animatetop; animation-duration: 0.8s; } /* Add Animation */ @-webkit-keyframes animatetop { from { right: -100px; opacity: 0 } to { right: 0; opacity: 1 } } @keyframes animatetop { from { right: -100px; opacity: 0 } to { right: 0; opacity: 1 } } /* The Close Button */ .close { color: #7F7F7F; font-size: 3rem; float: right; top: 0; } .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; } 

 <button class="modalbutton"><a href="#">CLICK ME :)</a></button><br> <div class="textinside"> Here as place holder to see the locked background<br> Here as place holder to see the locked background<br> Here as place holder to see the locked background<br> Here as place holder to see the locked background<br> Here as place holder to see the locked background <br> Here as place holder to see the locked background<br> Here as place holder to see the locked background<br> Here as place holder to see the locked background<br> Here as place holder to see the locked background<br> Here as place holder to see the locked background<br> Here as place holder to see the locked background<br> Here as place holder to see the locked background<br> Here as place holder to see the locked background<br> Here as place holder to see the locked background<br> Here as place holder to see the locked background<br> Here as place holder to see the locked background<br> Here as place holder to see the locked background<br> Here as place holder to see the locked background<br> Here as place holder to see the locked background<br> </div> <div class="modal"> <div class="modal-content"> <div class="modal-header"> <span class="close">&times;</span> <h2>2 Modal Header</h2> </div> <div class="modal-body"> <p>please link with 2</p> <p>Some other text...</p> <p>Some other text...</p> <p>Some other text...</p> <p>Some other text...</p> <p>Some other text...</p> <p>Some other text...</p> <p>Some other text...</p> <p>Some other text...</p> <p>Some other text...</p> <p>Some other text...</p> </div> <div class="modal-footer"> <h3>Modal Footer</h3> </div> </div> </div> 

Answer 2

You can give your body an overflow: hidden when the modal opens.

btn[i].onclick = function() {
   document.getElementsByClassName('modal')[i].style.display = "block";
   document.body.style.overflow = 'hidden';
}

And remove it when it closes:

span[i].onclick = function() {
   document.getElementsByClassName('modal')[i].style.display = "none";
   document.body.style.overflow = 'auto';
}

I've updated your jsfiddle to reflect this. Here is the new fiddle: JSFiddle