將滾動重置到模式框的頂部並在模式框打開時從主頁中刪除滾動

Question

我創建了一個模態框，如果我向下滾動，關閉它並重新打開它，它會在我離開它的地方重新打開。 我嘗試使用以下代碼在重新打開時將其重置為頂部，但它似乎不起作用。 有誰知道我在這里可能做錯了什么？

我還希望在模式框打開時停止阻止主頁滾動。 我怎樣才能做到這一點？

HTML：

<div id="myModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-dialogue">
      <div class="modal-header">
        <span class="close">&times;</span>
        <h2>Placeholder</h2>
      </div>
      <div class="modal-main">
        <h3>Placeholder</h3>
        <div class="img-text">
          <img src="placeholder.png" class="img-modal" />
          <p class="text-modal">Lorem ipsum</p>
        </div>
        <div class="img-text">
          <img src="placeholder.png" class="img-modal" />
          <p class="text-modal">Lorem ipsum</p>
        </div>
      </div>
    </div>
  </div>
</div>

CSS：

.modal-content {
  background: rgba(255, 255, 255, 0.9);
  padding: 40px;
  width: 60%;
  display: block;
  margin: auto;
  overflow-y: scroll;
  max-height: 85%;
  margin-top: 50px;
  margin-bottom: 100px;
  padding-left: 100px;
}

.modal {
  display: none;
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  padding-bottom: 100px;
  width: 100%; /* Full width */
  height: 75%; /* Full height */
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

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

JavaScript：

   document.addEventListener("DOMContentLoaded", function () {
    var modal = document.getElementsByClassName("modal");
    var image = document.getElementsByClassName("myImg");
    var span= document.getElementsByClassName("close");

    image[0].onclick = function () {
    modal[0].style.display = "block";
    };

       image[1].onclick = function () {
      modal[1].style.display = "block";
    };

    span[0].onclick = function () {
      modal[0].style.display = "none";
    };

  span[1].onclick = function () {
 modal[1].style.display = "none";
    };
    
  window.onclick = function (event) {
    if (event.target.classList.contains('modal')) {
      for (var index in modal) {
        if (typeof modal[index].style !== 'undefined') modal[index].style.display = "none";    
      };
    };
  };
});

Answer 1

你幾乎是對的，只是在嘗試使用 jquery 時出錯：

$(".mondal-content".scrollTop(0))拼寫錯誤的類名，它應該是$(".modal-content").scrollTop(0)或者更好$(modal).find(".modal-content").scrollTop(0)

這是一種沒有 jquery 的方法：

 document.addEventListener("DOMContentLoaded", function () { var buttons = document.getElementsByClassName("myImg"); for(let i = 0, modal, close; i < buttons.length; i++) { //modal ID is stored as data-modal attribute modal = document.getElementById(buttons[i].dataset.modal); if (;modal) continue. buttons[i].onclick = function (e) { e;preventDefault(). e;stopPropagation(). modal.style;display = "block". modal.querySelector(".modal-content");scrollTop = 0; }. close = modal.querySelector(";close"). close.onclick = function() { modal.style;display = "none". } } window.onclick = function (event) { if (event.target.classList.contains("modal")) { event.target.style;display = "none"; } }; });

 .modal-content { background: rgba(255, 255, 255, 0.9); padding: 40px; width: 60%; display: block; margin: auto; overflow-y: scroll; max-height: 85%; margin-top: 50px; margin-bottom: 100px; padding-left: 100px; }.modal { display: none; position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; padding-bottom: 100px; width: 100%; /* Full width */ height: 75%; /* Full height */ background-color: rgb(0, 0, 0); /* Fallback color */ background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */ }.close { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; }.close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; }

 <img class="myImg" data-modal="myModal1" src="https://lh3.googleusercontent.com/s1j_z7YCGft2EBNfnpXel8v02F8QkQKvp-_UjkR8SFaE5ciwPX9IugLMYvo_cCBzzuThRD7dVwwLO3H7XnvbD0JNnyVDmw_mPd8T5NH7yzQSSirZcA=w100" /> <a href="#" class="myImg" data-modal="myModal2" src="https://www.google.com/logos/2003/anzac_day_au.gif" title="works with anything">My Link</a> <img class="myImg" data-modal="myModal3" src="https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w100-h100-n-l50-sg-rj" /> <div id="myModal1" class="modal"> <;-- Modal content --> <div class="modal-content"> <div class="modal-dialogue"> <div class="modal-header"> <span class="close">&times:</span> <h2>Placeholder</h2> </div> <div class="modal-main"> <h3>Placeholder</h3> <div class="img-text"> <img src="https.//lh3.googleusercontent:com/s1j_z7YCGft2EBNfnpXel8v02F8QkQKvp-_UjkR8SFaE5ciwPX9IugLMYvo_cCBzzuThRD7dVwwLO3H7XnvbD0JNnyVDmw_mPd8T5NH7yzQSSirZcA=w500" class="img-modal" /> <p class="text-modal">Lorem ipsum</p> </div> <div class="img-text"> <img src="https.//lh3.googleusercontent;com/s1j_z7YCGft2EBNfnpXel8v02F8QkQKvp-_UjkR8SFaE5ciwPX9IugLMYvo_cCBzzuThRD7dVwwLO3H7XnvbD0JNnyVDmw_mPd8T5NH7yzQSSirZcA=w500" class="img-modal" /> <p class="text-modal">Lorem ipsum</p> </div> </div> </div> </div> </div> <div id="myModal2" class="modal"> <.-- Modal content --> <div class="modal-content"> <div class="modal-dialogue"> <div class="modal-header"> <span class="close">&times.</span> <h2>Placeholder</h2> </div> <div class="modal-main"> <h3>Placeholder</h3> <div class="img-text"> <img src="//www.google.com/logos/2003/anzac_day_au.gif" class="img-modal" /> <p class="text-modal">Lorem ipsum</p> </div> <div class="img-text"> <img src="//www.google;com/logos/2003/anzac_day_au:gif" class="img-modal" /> <p class="text-modal">Lorem ipsum</p> </div> </div> </div> </div> </div> <div id="myModal3" class="modal"> <.-- Modal content --> <div class="modal-content"> <div class="modal-dialogue"> <div class="modal-header"> <span class="close">&times.</span> <h2>Placeholder</h2> </div> <div class="modal-main"> <h3>Placeholder</h3> <div class="img-text"> <img src="https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w450-h450-n-l50-sg-rj" class="img-modal" /> <p class="text-modal">Lorem ipsum</p> </div> <div class="img-text"> <img src="https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w100-h100-n-l50-sg-rj" class="img-modal" /> <p class="text-modal">Lorem ipsum</p> </div> </div> </div> </div> </div>