Javascript Popup-Fenster - müssen Klasse erstellen und binden Ereignis zu jedem Element von document.getElementsByClassName

Question

Ich habe ein Pop-up-Fenster auf meiner Website und es ist drei Tasten zugeordnet, aber ich habe die gleiche ID auf allen Tasten, so wenn Ich klicke auf die dritte Schaltfläche, um das Pop-up zu öffnen, das mir das erste Pop-up gibt, gleiches mit der zweiten Schaltfläche.

Ich habe eine ähnliche Frage bereits gestellt, aber mit dem Feedback und den Antworten, die ich bekam, konnte ich sie nicht implementieren, da ich neu bei Javascript bin und nicht viel Erfahrung habe, also versuchte ich es stundenlang zu reparieren Ich habe immer noch kein Glück.

hier ist die javascript:

var modal = document.getElementById('myModal'); 

var btns = document.getElementsByClassName("myBtn"); 

var showModal = function() { 
    modal.style.display = "block"; 
}; 

for (var i = 0; i < btns.length; i++) { 
    btns[i].addEventListener('click', showModal, false); 
} 

var span = document.getElementsByClassName("close")[0]; 


span.onclick = function() { 
    modal.style.display = "none"; 
} 

window.onclick = function(event) { 
    if (event.target == modal) { 
     modal.style.display = "none"; 
    } 
    } 

Hier ist der HTML:

<footer class="panel-footer"> 
    <div class="btn btn-block btn-lg btn-default"> 
    <button id="myBtn">Sign up now</button> 
    <div id="myModal" class="modal"> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <span class="close">×</span> 
      <h2><img src="http://localhost:8383/homepage/img/logo.png" style="width:250px"></h2> 
     </div> 

     <div class="modal-body"> 
      <h4><b><u>Sign up for a basic subscription</u></b></h4><br> 
      <form method="post" action="contact_basic.php" name="contactform" id="contactform"> 
      <div class="results"></div> 
      <div class="row"> 
       <div class="col-sm-6"> 
       <div class="form-group"> 
        <label class="sr-only">Name</label> 
        <input name="name" type="text" class="form-control input-lg" placeholder="Name" required> 
       </div> 
       <div class="form-group"> 
        <label class="sr-only">Email</label> 
        <input name="email" type="email" class="form-control input-lg" placeholder="Email" required> 
       </div> 

       </div> 
       <div class="col-sm-6"> 
       <div class="form-group"> 
        <label class="sr-only">Phone Number</label> 
        <input name="phone" type="number" class="form-control input-lg" placeholder="Phone Number" required> 
       </div> 
       </div> 
       <div class="col-sm-6"> 
       <div class="form-group"> 
        <label class="sr-only">Organization Name</label> 
        <input name="orgName" type="text" class="form-control input-lg" placeholder="Organization Name"> 
       </div> 
       </div> 
       <div class="col-sm-3 col-xs-12"> 
       <button id="submit" type="submit" align="center" class="btn btn-danger btn-lg btn-block">Send</button> 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
</footer> 

Answer 1

Working fiddle

Das id Attribut sollte in demselben Dokument eindeutig sein, so dass Sie nur ersetzen könnte diese IDs durch class Attribut, zB:

<button id="myBtn">Sign up now</button> 

Wird:

<button class="myBtn">Sign up now</button> 

Dann in Ihrem js Ereignis auf alle Elemente mit dieser Klasse attach klicken:

var btns = document.getElementsByClassName("myBtn"); 

var showModal = function() { 
    modal.style.display = "block"; 
}; 

for (var i = 0; i < btns.length; i++) { 
    btns[i].addEventListener('click', showModal, false); 
} 

Hoffnung, das hilft.