【发布时间】：2021-04-24 07:29:24
【问题描述】：
我创建了一个模态框，如果我向下滚动，关闭它并重新打开它，它会在我离开它的地方重新打开。我尝试使用以下代码在重新打开时将其重置为顶部，但它似乎不起作用。有谁知道我在这里可能做错了什么？
我还希望在模式框打开时停止阻止主页滚动。我该怎么做？
HTML：
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-dialogue">
<div class="modal-header">
<span class="close">×</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";
};
};
};
});
【问题讨论】：
-
请使用code snippets，以便我们进行测试
标签： javascript html css scroll