模态打开时锁定背景

Question

我想知道当模式打开时如何锁定背景。我在这里看到的所有答案都与引导程序模态有关。这是我从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。

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