複数のモーダルシングルページのサポート

Question

私はいくつかのサンプルコードフォームw3schools.comを使用して、1つのページに複数のモーダルを含めることを試みています。私は以下に使用しようとしているコードを含めました。私はここからコードを得た。 http://www.w3schools.com/howto/howto_css_modals.asp

以下は、動作中のコードの例です。最初のモーダルは機能しますが、2番目のモーダルは表示されません。 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

あなたが同じIDを持つボタンの両方を参照しています。そのため、イベントは、最初にDOMに表示されている最初のボタンに対してのみバインドされます。

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

よう

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

とHTMLコードの下にこれは作業を開始しますようにあなたは、JSのコードを変更する場合は。あなたのモーダル2にいくつかのCSSの問題があります。