一页上的多个模式，带有递增的CSS ID

Question

I have more than eight modals on one page, each with a unique CSS id. I was using the following javascript when only using one modal, but it doesn't target each CSS id. Without knowing much javascript, I'd like to know how to target each modal dynamically with a counter variable.

<button class="fsc-modal-button">Read Bio</button>
<div class="fsc-modal" id="fsc-modal-1">
    <div class="fsc-modal-content"><span class="fsc-modal-close">×</span</div>
</div>

<button class="fsc-modal-button">Read Bio</button>
<div class="fsc-modal" id="fsc-modal-2">
    <div class="fsc-modal-content"><span class="fsc-modal-close">×</span</div>
</div>


<script type="text/javascript">

var button = document.getElementsByClassName('fsc-modal-button')[0];
var modal = document.getElementsByClassName('fsc-modal')[0];
var span = document.getElementsByClassName('fsc-modal-close')[0];

button.onclick = function() {
    modal.style.display = "block";
}

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

window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>

Answer 1

function openModal(id) {
  var button = document.getElementsByClassName('fsc-modal-button')[0];
  var modal = document.getElementById('fsc-modal-' + id);
  var span = document.getElementsByClassName('fsc-modal-close')[0];

  button.onclick = function() {
     modal.style.display = "block";
  }

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

  window.onclick = function(event) {
  if (event.target == modal) {
     modal.style.display = "none";
  }
 }
}

you can call you function as openModal(1) and so on.