Перестановка контейнера CSS - PullRequest
Новая
       38

Перестановка контейнера CSS

0 голосов
/ 26 марта 2020

У меня есть функциональная Javascript всплывающая кнопка. Однако при нажатии на всплывающую кнопку положение страницы возвращается наверх. Это также происходит, когда я нажимаю кнопку закрытия. Я полагаю, что это потому, что всплывающий контейнер установлен в определенной позиции c. Как сделать так, чтобы страница оставалась в том же положении при нажатии кнопки и по-прежнему отображала кнопку?

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');
}

Ответы [ 2 ]

1 голос
/ 26 марта 2020

Использовать 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>
0 голосов
/ 26 марта 2020

Ваша проблема в том, что вы используете <a href="#"></a>.

. Это позволит прокрутить страницу вверх, попробуйте использовать <button type="button"> вместо

.
...