我正在做我的第一个JavaScript项目。
我试图从HTML页面上的多个位置打开相同的模式窗口及其内容。
我的代码只适用于页面的第一个按钮，不适用于同一页面上的任何其他按钮。正如你在下面的代码中看到的，我已经尝试使用getElementsByClassName而不是getElementsById，但我仍然面临问题。有没有办法做到这一点呢？
这里是jsFiddle

<button class="myBtn errormodalbutton">Open Modal 1</button>
<hr>
<button class="myBtn errormodalbutton">Open Modal 2</button>
<hr>
<button class="myBtn errormodalbutton">Open Modal 3</button>
<hr>
<button class="myBtn errormodalbutton">Open Modal 4</button>

<div class="myModal modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <h3 style="text-align=center">Test</h3>
    <p>SOmetext.</p>
    <div class="close-button">
      <button type="button" class="right" onclick="closePopup()">Close</button>
    </div>
  </div>
</div>

.modal {
  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 */
.modal-content {
  font-style: normal;
  width: 600px;
  height: 200px;
  background: #fff;
  border-radius: 6px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: left;
  padding: 0 0px 5px 10px;
  color: #333;
}

.errormodalbutton {
  background: none !important;
  border: none;
  padding: 0 !important;
  /*optional*/
  font-family: arial, sans-serif;
  /*input has OS specific font-family*/
  color: #069;
  text-decoration: underline;
  cursor: pointer;
}

.close-button {
  padding: 0px 10px 10px 0px;
  vertical-align: baseline;
}

.close-button button {
  position: fixed;
  bottom: 10px;
  right: 10px;
  float: right;
  font-style: normal;
  background: #6C757D;
  color: #fff;
  border: 0;
  outline: none;
  border-radius: 2px;
  cursor: pointer;
}

// Get the modal
 var modal = document.getElementsByClassName("myModal")[0];

 // Get the button that opens the modal
 var btn = document.getElementsByClassName("myBtn")[0];

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

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

 // When the user clicks on <span> (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";
   }
 }

 function closePopup() {
   modal.style.display = "none";
 }