同じスクリプトを使用してモーダルを開く

Question

私は雑誌用のウェブサイトを設計しています。下の関数は、ユーザーが選択した部分を表示できるモーダルを開くことです。私はこのファイルを同じファイルで複数回使用したいので、いくつか問題があります。私は変数などの名前を変更しようとしたが、うまくいきませんでしたので、簡単な答えがあるように感じます。明らかに、それは何度も何度も働かないので、私はそれをそれぞれ適応させる方法を探しています。ありがとう！

HTMLは以下のそれぞれの変数の基本的なモーダルフォームですが、私はここでそれを入れていくつかの問題を抱えているので、ここでのスクリーンショットだ：以下

http://prntscr.com/dugugwはスクリプトです...

function = modal(); { 
    // Split Ends 
    // Get the modal 
var modal = document.getElementById('myModal'); 

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

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

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

Answer 1

モーダルを開くすべてのボタンにクラスを追加します。 次に、クリックイベントハンドラをすべてのボタンに追加します。

<button type="button" class="modal-button" .... 

// Get the buttons that opens the modal 
var btns = document.getElementsByClass("modal-button"); 

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

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