Unterstützung für mehrere Modal Single Page

Question

Ich versuche, einige Beispielcode Formular w3schools.com zu verwenden, um mehrere Modale auf einer einzigen Seite enthalten. Ich habe den Code eingefügt, den ich unten verwenden möchte. Ich habe den Code von hier. http://www.w3schools.com/howto/howto_css_modals.asp

Hier ist ein Beispiel für den Code in Aktion. Beachten Sie, dass das erste Modal funktioniert, aber das zweite Modal nicht erscheint. https://jsfiddle.net/y0uavmo0/

HTML:

<h2>Modal Example1</h2> 

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

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

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

</div> 


<h2>Modal Example2</h2> 

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

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

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

JS:

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

Sie beziehen sich sowohl die Tasten mit derselben ID. Das Ereignis ist also nur für die erste Schaltfläche bindbar, da sie im DOM zuerst erscheint.

Wenn Sie die JS-Code ändern, wie unten

// Get the modal 
var modal = document.getElementsByClassName('modal'); 

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


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

// When the user clicks the button, open the modal 
btn[0].onclick = function() { 
    modal[0].style.display = "block"; 
} 

btn[1].onclick = function() { 
    modal[1].style.display = "block"; 
} 
// When the user clicks on <span> (x), close the modal 
span[0].onclick = function() { 
    modal[0].style.display = "none"; 
} 

span[1].onclick = function() { 
    modal[1].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"; 
    } 
} 

und HTML-Code wie

<h2>Modal Example1</h2> 

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

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

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

</div> 


<h2>Modal Example2</h2> 

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

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

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

</div> 

Diese Arbeit beginnt. obwohl Sie einige CSS-Probleme in Ihrem modalen 2 haben werden.