重新定位CSS容器

Question

我有一个功能强大的Javascript弹出按钮。然而，当点击弹出按钮时，页面的位置会回到顶部。当我按下关闭按钮时也会发生这种情况。我相信这是因为弹出式容器设置在特定的位置。如何使页面在单击按钮时保持在同一位置，并且仍然显示按钮？

HTML:

<div class="container">
<h1>Lorem Ipsum</h1>
<br>
<div class="box button">
<a href="#">Lorem Ipsum</a>
</div>
<div class="popup">
<h2>Lorem Ipsum</h2>
<video src="video.mov"controls></video>
<p>
Insert Text Here
</p>
<a href="#" style="border: 2px solid; padding: 5px;">CLOSE</a>
</div>
</div>

CSS：

.container 
{
margin:2em 2em;
display:grid;
grid-template-columns: repeat(2,340px);
grid-gap: 55px;
}
.box 
{
border: 3px solid;
display: flex;
align-items: center;
justify-content: center;
font-family: "Glacial Indifference", sans-serif;
font-size: 30px;
padding: 10px;
border-radius: 5px;
border-color: #FFFFFF;
height: 170px;
position: relative;
}
.popup
{
display: none;
visibility: hidden;
position: fixed;
left: 50%;
transform: translate(-50%,-50%);
width: 800px;
height: 600px;
padding: 50px;
box-shadow: 0 5px 30px rgba(0,0,0,.30);
background: #A6A6A6;
}
.active
{
display: block;
top: 45%;
visibility: visible;
left: 50%;
}

JS:

//Popup
function open() {
document.querySelectorAll(".button a").forEach((a) => {
a.parentElement.nextElementSibling.classList.remove("active");
});
this.parentElement.nextElementSibling.classList.add("active");
//popup is sibling of a's parent element
document.querySelector('.body').classList.add('blurred'); 
}
function close() {
this.parentElement.classList.remove("active"); // .popup
document.querySelector('.body').classList.remove('blurred');
}

Answer 1

使用href="javascript:void(0(；">。它将阻止页面滚动。

<div class="container">
<h1>Lorem Ipsum</h1>
<br>
<div class="box button">
<a href="javascript:void(0);">Lorem Ipsum</a>
</div>
<div class="popup">
<h2>Lorem Ipsum</h2>
<video src="video.mov"controls></video>
<p>
Insert Text Here
</p>
<a href="javascript:void(0);" style="border: 2px solid; padding: 5px;">CLOSE</a>
</div>
</div>

Answer 2

您的问题是使用的是<a href="#"></a>。

这将滚动到页面顶部，尝试使用<button type="button">而不是