Kann nicht mehr als ein Button Modal erstellen

Question

Ich kopiere meine modale Schaltfläche und das Problem ist, dass ich "Open Modal 2" nicht in meinem Code anzeigen kann.

<button id="myBtn">Open Modal</button> 
<div id="myModal" class="modal"> 
<div class="modal-content"> 
    <span class="close">×</span> 
    <p>Some text in the Modal..</p> 
    </div> 

Hier ist meine komplette Code: https://jsfiddle.net/dedi_wibisono17/xn3npwc4/

Was soll ich tun? Vielen Dank, dass Sie

Answer 1

hilft Ihnen, verschiedene ID für Ihre "Open Modal 2" Elemente verwendet werden soll.

Laut Definition und Verwendung von W3School,

die getElementById() Methode greift auf das erste Element mit dem angegebenen ID.

Answer 2

In meiner bescheidenen Meinung Sie ignoriert, was id bedeutet

Zwei ids Schaltfläche sind die gleichen, die Beschriftungen sind Open Modal und Open Modal2

So BTN Variable mit nur erste Element, das ID verbunden ist, myBtn

var btn = document.getElementById ("myBtn");

Danke

Answer 3

Versuchen Sie es. Hope it :)

<!-- Trigger/Open The Modal --> 
<button id="myBtn">Open Modal</button> 

<!-- The Modal --> 
<div id="myModal" class="modal"> 

<!-- Modal content --> 
<div class="modal-content"> 
<span class="close">×</span> 
<p>Some text in the Modal..</p> 
</div> 

</div> 

<button id="myBtn2">Open Modal 2</button> 

<!-- The Modal --> 
<div id="myModal" class="modal"> 

<!-- Modal content --> 
<div class="modal-content"> 
<span class="close">×</span> 
<p>Some text in the Modal..</p> 
</div> 

    </div> 


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

// Get the button that opens the modal 
var btn = document.getElementById("myBtn"); 
var btn2 = 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"; 
} 

    btn2.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 4

Sie haben die gleiche ID für Ihre Schaltfläche "Open Modal" und "Open Modal 2". Wenn du var btn = document.getElementById("myBtn"); schreibst, hast du den ersten von zwei deiner Buttons. Und alle Ereignisse, die Sie nur für diese ersten Schaltfläche binden. Sie müssen also id zweite Taste für so etwas wie ‚myBtn1‘ und so etwas wie dieses Stück Code verwenden ändern Event-Handler zu setzen:

function setModal(btn,modal) { 
    btn.onclick=function() { 
     modal.style.display="block"; 
    } 
    window.onclick = function(event) { 
     if (event.target == modal) { 
      modal.style.display = "none"; 
     } 
    } 
    var span=modal.querySelectorAll(".close") [0]; 
    span.onclick = function() { 
     modal.style.display = "none"; 
    } 
}; 

setModal(document.getElementById("myBtn"),document.getElementById('myModal')); 
setModal(document.getElementById("myBtn1"),document.getElementById('myModal')); 

ich Ihre Geige hier geändert haben: https://jsfiddle.net/1fgmfpfc/

Answer 5

Ihre HTML ID Konflikt in Javascript, es ist ein großes Problem Ihres Codes. document.getElementById binden Sie immer Ihren oberen HTML-Code wie, wenn Sie Ihren Modal2-Code höher als Modal1 ändern, dann Modal2 öffnen, aber nicht öffnen in Modal1, so definieren Sie andere HTML-ID oder versuchen, dynamische Name der HTML-ID.