インクリメンタルCSS idを使用した1ページの複数のモーダル

Question

1つのページに8つ以上のモーダルがあり、それぞれに固有のCSS IDがあります。私は1つのモーダルを使用しているときに次のjavascriptを使用していましたが、各CSS idを対象としていません。多くのjavascriptを知らなくても、カウンター変数を使って各モーダルを動的にターゲット設定する方法を知りたいと思います。

<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"; 
    } 
} 
} 

あなたがそうでopenModal(1)ととして機能を呼び出すことができます。