按钮打开相同的模式

Question

我在页面上使用2个模态。我用一个按钮打开这些模式：

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

当我点击按钮时，按钮打开相同的模式。我该如何解决这个问题？

这里是模态

Modal1：

<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：

<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> 

脚本模态1：

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

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

    // 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> 

脚本模态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。

尝试

// 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 
    ... 
}());