Question

我通过随意遵循this来做一个模态。问题是显示模式时，我不想滚动页面的其余部分。该怎么办？

Answer 1

您可以给尸体overflow: hidden！快速说明：您需要删除模式关闭时隐藏的溢出！

// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
  document.body.style.overflow = "hidden";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
  document.body.style.overflow = "auto";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    document.body.style.overflow = "auto";
    modal.style.display = "none";
  }
}

body {font-family: Arial, Helvetica, sans-serif;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

<h2>Modal Example</h2>

<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text in the Modal..</p>
  </div>

</div>
Lorem ipsum dolor sit amet, facer iusto concludaturque mei an. Mei cu eripuit pericula argumentum, alterum maluisset conclusionemque nec te, at sea quidam omittantur. Ius nominati sensibus iracundia ea, ad facilisi posidonium per, feugiat liberavisse cum eu. Vim diam molestiae evertitur eu, eam ex quas epicuri scribentur.

Porro ornatus eu per, altera vocent incorrupte ea eam, eum eu eleifend voluptatum. Eu labore labitur eos. Dolore voluptua iudicabit et his, ius voluptua tacimates volutpat ad. Facer nominati sapientem ad vel, ea magna novum eam.

Ex eos vero explicari, vis congue malorum eleifend ad. Quo dolor dolorum in, per molestiae scriptorem te, alterum constituto ullamcorper pro an. His quod malis tantas at, cum latine labores oporteat te, eu ludus consequat sit. Cu pro etiam prodesset accommodare, te has apeirian qualisque adversarium.

Mel id scripta reprehendunt. An nam autem signiferumque, sed no atqui sonet cotidieque. Pro te latine pericula appellantur, te qui fabellas gubergren intellegat. Mea alii posse indoctum at, munere convenire laboramus mea cu, vel ea summo quando.

Populo detraxit pro eu. Sea iusto explicari eu. Sea eu omnis equidem dolorum, vide choro mei ei. Essent invidunt scribentur nec no, eos augue moderatius in. Integre delectus mei cu, ex ius meis magna expetenda.

查看模态时停止滚动

1 个答案: