当模态打开时锁定背景

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