如何使用最少的 Javascript 让我在所有按钮上弹出显示

// Get the modal
var modal = document.getElementById("myModalz");

// Get the button that opens the modal
var btn = document.getElementById("myBtnz");

// Get the  element that closes the modal
var span = document.getElementsByClassName("closez")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on  (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

@import url("https://fonts.googleapis.com/css2?family=Istok+Web:wght@400;700&display=swap");

* {
  margin: 0;
  padding: 0;
  font-family: "Istok Web", sans-serif;
}

.card {
  margin: 0.5%;
  display: inline-block;
  position: relative;
  width: 320px;
  height: 480px;
  background: #191919;
  border-radius: 20px;
  overflow: hidden;
}

.card::before {
  content: "";
  position: absolute;
  top: -50%;
  width: 100%;
  height: 100%;
  background: #ffce00;
  transform: skewY(345deg);
  transition: 0.5s;
}

.card:hover::before {
  top: -70%;
  transform: skewY(390deg);
}

.card::after {
  content: "CORSAIR";
  position: absolute;
  bottom: 0;
  left: 0;
  font-weight: 600;
  font-size: 6em;
  color: rgba(0, 0, 0, 0.1);
}

.card .imgBox {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 20px;
  z-index: 1;
}

.card .imgBox img {
    max-width: 100%;
    
    transition: .5s;
}

.card:hover .imgBox img {
    max-width: 50%;
      
}

.card .contentBox {
  position: relative;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 2;
}

.card .contentBox h3 {
  font-size: 18px;
  color: white;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.card .contentBox .price {
  font-size: 24px;
  color: white;
  font-weight: 700;
  letter-spacing: 1px;
}

.card .contentBox .buy {
  position: relative;
  top: 100px;
  opacity: 0;
  padding: 10px 30px;
  margin-top: 15px;
  color: #000000;
  text-decoration: none;
  background-color: #ffce00;
  border-radius: 30px;
  text-transform: uppercase;
  letter-spacing: 1px;
    transition: 0.5s;
}

.card:hover .contentBox .buy {
  top: 0;
  opacity: 1;
}

.mouse {
  height: 300px;
  width: auto;
}


/* The Modal (background) */
.modalz {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modalz-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.closez {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.closez:hover,
.closez:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

<!--zero-->
<div class="card">

  <div class="imgBox">
    <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.redd.it%2Fw8f8iuj68tn61.jpg&f=1&nofb=1" alt="Backrooms Pack" class="mouse">
  </div>

  <div class="contentBox">
    <h3>Backrooms Pack</h3>
    <h2 class="price">4.<small>99</small> $</h2>
    <a href="#" class="buy" id="myBtnz">Buy Now</a>
  </div>

</div>


<!-- The Modal -->
<div id="myModalz" class="modalz">

  <!-- Modal content -->
  <div class="modalz-content">
    <span class="closez">&times;</span>
    <p>Some text in the Modal..</p>
  </div>

</div>

<!--one-->

<div class="card">

  <div class="imgBox">
    <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse2.mm.bing.net%2Fth%3Fid%3DOIP.y50mqCTtnDQNTZL3prMvUgHaJb%26pid%3DApi&f=1" alt="War Pack" class="mouse">
  </div>

  <div class="contentBox">
    <h3>War Pack</h3>
    <h2 class="price">4.<small>99</small> $</h2>
    <a href="#" class="buy" id="myBtnz">Buy Now</a>
  </div>

</div>

<!-- The Modal -->
<div id="myModalz" class="modalz">

  <!-- Modal content -->
  <div class="modalz-content">
    <span class="closez">&times;</span>
    <p>Some text in the Modal..</p>
  </div>

</div>