I am having an issue with my Javascript popup buttons. Whenever the popup appears, the buttons that come after the one clicked appear on top of the popup container, and the previous buttons appear behind it. How can I ensure that the popup container displays in front of all buttons once it appears? The HTML div is repeated 4 times.
//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>