通过弹出容器显示的按钮？

Question

我有一个多功能的 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>

Answer 1

CSS.popup{&nbsp; z-index:99999;}