Javascript фон размытие / всплывающее окно перехода (при нажатии)

Question

В настоящее время у меня настроено 4 кнопки, которые открывают 4 разных всплывающих окна при нажатии. Как я могу добавить к этому в своем коде, чтобы после нажатия каждой кнопки, фон размылся, и всплывающее окно появилось? Кроме того, как я могу изменить свой код, чтобы при нажатии другой кнопки при открытии всплывающего окна оно закрывалось и открывалось новое соответствующее всплывающее окно для этой кнопки?

document.querySelectorAll(".button a").forEach((a) => {
  a.addEventListener("click", toggle);
});
document.querySelectorAll(".popup a:last-child").forEach((a) => {
  a.addEventListener("click", close);
});

function toggle() {
  this.parentElement.nextElementSibling.classList.toggle("active"); //popup is sibling of a's parent element
}

function close() {
  this.parentElement.classList.toggle("active"); // .popup
}

.box {
  border: 3px solid;
  color: #FFFFFF;
  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;
}

.popup {
  display: none;
  visibility: hidden;
  position: fixed;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  padding: 50px;
  box-shadow: 0 5px 30px rgba(0, 0, 0, .30);
  background: #A6A6A6;
}

.active {
  display: block;
  top: 50%;
  visibility: visible;
  left: 50%;
}

<div class="container">
  <div class="box button">
    <a href="#">OPEN1</a>
  </div>
  <div class="popup">
    <h2>HEADER</h2>
    <video src="video1.mov" controls></video>
    <p>
      content
    </p>
    <a href="#" style="border: 2px solid; padding: 5px;">CLOSE</a>
  </div>

  <div class="box button">
    <a href="#">OPEN2</a>
  </div>
  <div class="popup">
    <h2>HEADER</h2>
    <video src="video2.mov" controls></video>
    <p>
      content
    </p>

    <a href="#" style="border: 2px solid; padding: 5px;">CLOSE</a>
  </div>

  <div class="box button">
    <a href="#">BUTTON3</a>
  </div>
  <div class="popup">
    <h2>HAEADER3</h2>
    <video src="video3.mov" controls></video>
    <p>
      content
    </p>
    <a href="#" style="border: 2px solid; padding: 5px;">CLOSE</a>
  </div>

  <div class="box button">
    <a href="#">BUTTON</a>
  </div>
  <div class="popup">
    <h2>HEADER4</h2>
    <video src="video4.mov" controls></video>
    <p>
      content
    </p>
    <a href="#" style="border: 2px solid; padding: 5px;">CLOSE</a>
  </div>
</div>

Answer 1

Вот как это работает,

Добавлен div с идентификатором overlay и добавлены следующие стили

  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(128, 0, 128, 0.35);
  z-index: 1;
  cursor: pointer;

Когда всплывающее окно активно, оно активирует оверлей и закрывается , он удалит оверлей.

Также добавлена ​​анимация для классного эффекта

document.querySelectorAll(".button a").forEach((a) => {
  a.addEventListener("click", toggle);
});
document.querySelectorAll(".popup a:last-child").forEach((a) => {
  a.addEventListener("click", close);
});

function toggle() {
  const popup = document.querySelectorAll('.popup');
  popup.forEach(el => el.classList.remove('active'));
  document.getElementById('overlay').style.display = 'block';
  this.parentElement.nextElementSibling.classList.toggle("active"); //popup is sibling of a's parent element
}

function close() {
  document.getElementById('overlay').style.display = 'none';
  this.parentElement.classList.toggle("active"); // .popup
}

.container {
  position: relative;
}

.box {
  border: 3px solid;
  color: #FFFFFF;
  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;
}

.popup {
  display: none;
  position: absolute;
  width: 300px;
  box-shadow: 0 5px 30px rgba(0, 0, 0, .30);
  background: #efefef;
  padding: 20px;
}

.active {
  display: block;
  left: 45%;
  margin-left: -50px;
  top: 50%;
  margin-top: -50px;
  z-index: 99;
  transition: .5s;
  animation: fade_in_show 0.5s
}

#overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(128, 0, 128, 0.35);
  z-index: 1;
  cursor: pointer;
}

@keyframes fade_in_show {
  0% {
    opacity: 0;
    transform: scale(0)
  }
  100% {
    opacity: 1;
    transform: scale(1)
  }
}

<div class="container">
  <div id="overlay"></div>
  <div class="box button">
    <a href="#">OPEN1</a>
  </div>
  <div class="popup">
    <h2>HEADER</h2>
    <video src="video1.mov" controls></video>
    <p>
      content
    </p>
    <a href="#" style="border: 2px solid; padding: 5px;">CLOSE</a>
  </div>

  <div class="box button">
    <a href="#">OPEN2</a>
  </div>
  <div class="popup">
    <h2>HEADER</h2>
    <video src="video2.mov" controls></video>
    <p>
      content
    </p>

    <a href="#" style="border: 2px solid; padding: 5px;">CLOSE</a>
  </div>

  <div class="box button">
    <a href="#">BUTTON3</a>
  </div>
  <div class="popup">
    <h2>HAEADER3</h2>
    <video src="video3.mov" controls></video>
    <p>
      content
    </p>
    <a href="#" style="border: 2px solid; padding: 5px;">CLOSE</a>
  </div>

  <div class="box button">
    <a href="#">BUTTON</a>
  </div>
  <div class="popup">
    <h2>HEADER4</h2>
    <video src="video4.mov" controls></video>
    <p>
      content
    </p>
    <a href="#" style="border: 2px solid; padding: 5px;">CLOSE</a>
  </div>
</div>

Answer 2

Измените вашу toggle() функцию на open(). Вместо того, чтобы переключать ваши классы, просто удалите класс .active из всех кнопок, а затем добавьте его в поле, соответствующее кнопке, на которую вы нажали. Таким образом, вы можете добавить размытие фона в функции open() и удалить его в close().

Я бы также предложил использовать один блок для всех ваших всплывающих окон и просто изменить источник видео и <h2> текст, в соответствии с которым была нажата кнопка. (Возможно, сохраните эту информацию в атрибутах data-.) Таким образом, вы можете легко расположить ее под кнопками и по-прежнему получать доступ к другим кнопкам, когда она открыта.

document.querySelectorAll(".button a").forEach((a) => {
  a.addEventListener("click", open);
});
document.querySelectorAll(".popup a:last-child").forEach((a) => {
  a.addEventListener("click", close);
});

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('.background').classList.add('blurred');
  
}

function close() {
  this.parentElement.classList.remove("active"); // .popup
  document.querySelector('.background').classList.remove('blurred');
}

body {
  margin: 0;
}
.background {
  background-image: url(https://live.staticflickr.com/1618/23872051484_6f199fa269_b.jpg);
  background-size: cover;
  width: 100%;
  height: 100vh;
  padding: 2em;
  z-index: 0;
  position: absolute;
  top: 0;
}
.container {
  z-index: 1;
  position: relative;
}
.box {
  border: 1px solid;
  color: #FFFFFF;
  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;
  background-color: rgba(255,255,255,0.5);
  margin: 10px auto;
  width: 50%;
}

.popup {
  display: none;
  visibility: hidden;
  position: fixed;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  padding: 50px;
  box-shadow: 0 5px 30px rgba(0, 0, 0, .30);
  background: #A6A6A6;
}

.active {
  display: block;
  top: 50%;
  visibility: visible;
  left: 50%;
}

.blurred {
  filter: blur(8px);
  -webkit-filter: blur(8px);
}

<div class="container">
  <div class="box button">
    <a href="#">OPEN1</a>
  </div>
  <div class="popup">
    <h2>HEADER</h2>
    <video src="video1.mov" controls></video>
    <p>
      content
    </p>
    <a href="#" style="border: 2px solid; padding: 5px;">CLOSE</a>
  </div>

  <div class="box button">
    <a href="#">OPEN2</a>
  </div>
  <div class="popup">
    <h2>HEADER</h2>
    <video src="video2.mov" controls></video>
    <p>
      content
    </p>

    <a href="#" style="border: 2px solid; padding: 5px;">CLOSE</a>
  </div>

  <div class="box button">
    <a href="#">BUTTON3</a>
  </div>
  <div class="popup">
    <h2>HAEADER3</h2>
    <video src="video3.mov" controls></video>
    <p>
      content
    </p>
    <a href="#" style="border: 2px solid; padding: 5px;">CLOSE</a>
  </div>

  <div class="box button">
    <a href="#">BUTTON</a>
  </div>
  <div class="popup">
    <h2>HEADER4</h2>
    <video src="video4.mov" controls></video>
    <p>
      content
    </p>
    <a href="#" style="border: 2px solid; padding: 5px;">CLOSE</a>
  </div>
</div>
<div class="background"></div>

Answer 3

Вы можете использовать css, чтобы размыть фон.

filter: blur(3px);

Чтобы закрыть всплывающее окно, используйте javascript:

document.onclick = close;

, где close - это функция, содержащая код для закрытия. всплывающее окно.