當模態打開時鎖定背景

Question

我想知道當模態打開時如何鎖定背景。 我在這里看到的所有答案都與bootstrap模態有關。 這是我從W3抓到的。

模態將包含更多內容。 話雖如此，模態將垂直滾動，背景內容將保持靜態（當模態打開時）。

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

這里的技巧是在模態可用時將主體的溢出設置為隱藏，然后在隱藏模態時重置規則。 在代碼段中添加了更多文字，以便更有效地展示這一點。

 // 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

你可以給你的身體overflow: hidden當模態打開時overflow: hidden 。

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

並在關閉時將其刪除：

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

我已經更新了你的jsfiddle以反映這一點。 這是新的小提琴： JSFiddle