У меня есть несколько функциональных Javascript всплывающих кнопок. Однако, когда появляется всплывающее окно, кнопки после одного клика появляются в верхней части всплывающего контейнера, а предыдущие кнопки появляются за контейнером. Как мне сделать так, чтобы всплывающий контейнер отображался во всех кнопках после его появления? HTML div повторяется 4 раза.
//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
}
function close() {
this.parentElement.classList.remove("active"); // .popup
}
.container {
margin: 2em 2em;
display: grid;
grid-template-columns: repeat(2, 340px);
grid-gap: 55px;
}
.box {
display: flex;
align-items: center;
justify-content: center;
height: 170px;
position: relative;
}
.popup {
display: none;
visibility: hidden;
position: fixed;
left: 50%;
transform: translate(-50%, -50%);
width: 800px;
height: 600px;
padding: 50px;
background: #A6A6A6;
}
.active {
display: block;
top: 45%;
visibility: visible;
left: 50%;
}
<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>