ボタンが同じモーダルを開く

Question

私は自分のページに2つのモーダルを使用しています。ボタンでこれらのモーダルを開きます：

<button type="button" id="myBtn1">Modal 1</button> 
<button type="button" id="myBtn2">Modal 2</button> 

ボタンをクリックすると、ボタンが同じモーダルを開きます。どうすれば修正できますか？

0123：モーダル1

<div id="myModal2" class="modal"> 
    <div class="modal-content"> 
    <span class="close">&times;</span> 
    <div class="row"> 
     <div class=""> 
     <div class="x_content">     
      <p>content modal 2</p> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

スクリプト：

<div id="myModal1" class="modal"> 
    <div class="modal-content"> 
    <span class="close">&times;</span> 
    <div class="row"> 
     <div class=""> 
     <div class="x_content">     
      <p>content modal 1</p> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

Modal2：ここ

は

Modal1モーダルです

スクリプトモーダル2：

<script> 
    // Get the modal 
    var modal = document.getElementById('myModal2'); 

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

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

Answer 1

プライベート関数を入れて、モーダルとBTNに同じ名前のVaRいけないはずです。

はどのようにこれらのスクリプトをロードしている

// Get the modal 
var modal1 = document.getElementById('myModal1'); 

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

// Get the modal 
var modal2 = document.getElementById('myModal2'); 

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

Answer 2

あなたが実際にbtn.onclickあたりの要素を割り当てる方がいいでしょう。最後に割り当てられた値を使用するグローバル変数モーダルを呼び出しています。

// for first script 
btn.onclick = function() { 
    document.getElementById("myModal1").style.display = "block"; 
} 


// for second script 
btn.onclick = function() { 
    document.getElementById("myModal2").style.display = "block"; 
} 

Answer 3

あなたは

(function(){ 
    // Get the modal 
    var modal = document.getElementById('myModal2'); 

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

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