将滚动重置为模式框的顶部，并在模式框打开时从主页面删除滚动

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>