js realizes bullet frame effect

In this paper, we share the specific code of js to achieve the effect of bullet frame for your reference. The specific contents are as follows

Using display to control the reality and hiding of pop-up window

<!--  Ejection layer  -->
<div id="popLayer"></div> <!-- Black mask  -->
<div id="popBox">
  <div class="close">
   X
  </div>
  <div>
   <!--  Content  -->
 </div>
</div>

js:

// Click the Close button 
var close = document.querySelector(".close")
close.onclick = function () {
 console.log(" Click ")
 var popBox = document.getElementById("popBox");
 var popLayer = document.getElementById("popLayer");
 popBox.style.display = "none";
 popLayer.style.display = "none";
}


// Called when it needs to be displayed 
var popLayer = document.getElementById("popLayer");
popBox.style.display = "block";
popLayer.style.display = "block";

CSS:

/*  Ejection layer  */
#popLayer {
 display: none;
 background-color: #000;
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 z-index: 10;
 opacity: 0.6;
}

/* Ejection layer */
#popBox {
 display: none;
 background-color: #FFFFFF;
 z-index: 11;
 width: 220px;
 height: 300px;
 position: fixed;
 top: 0;
 right: 0;
 left: 0;
 bottom: 0;
 margin: auto;
}

/* Close button */
#popBox .close {
 width: 20px;
 height: 20px;
 border-radius: 50%;
 position: absolute;
 border: 1px solid #fff;
 color: #fff;
 text-align: center;
 line-height: 20px;
 right: 8px;
 top: 8px;
 z-index: 50;
}

#popBox .close a {
 text-decoration: none;
 color: #2D2C3B;
}