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