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

在这里，它是如何工作的，

添加了一个ID覆盖的div并添加了以下样式

  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是包含用于关闭弹出窗口的代码的函数。