重新定位 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

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

这会滚动到页面顶部，请尝试使用 <button type="button"> 代替

Answer 2

使用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>

重新定位 CSS 容器

Repositioning a CSS container

html

javascript

css

popup