Более одного модальных ящиков на одной странице

Question

Здесь я помещаю в 2 кнопки, где щелкнуть их будет всплывающее окно мода.

<li type="button" id="myBtn" class="w3-hide-small w3-center"><a href="#" class="w3-hover-white">1</a></li> 
<li type="button" id="myBtn2" class="w3-hide-small w3-center"><a href="#" class="w3-hover-white">2</a></li> 

Вот модальная информация недели один:

<!-- MODAL INFORMATION FOR WEEK 1 --> 
<div id="myModal" class="modal"> 
    <div class="modal-content"> 
     <span class="close">×</span> 
    <p><h2><font color="black">Week 1</font></h2></p> 
    <div class="modal-body"> 
     <p><font color="black"> ex1</p> 
    </div> 
    </div> 
</div> 

Вот модальная информация две недели:

<div id="myModal2" class="modal"> 
    <div class="modal-content"> 
     <span class="close">×</span> 
    <p><h2><font color="black">Week 2</font></h2></p> 
     <p><font color="black"> Example 1 </p> 
    </div> 
</div> 

Сценарий:

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

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

Я думал, что изменение идентификатора позволит мне относиться к модальным полям по-разному друг от друга, а также к тому, что я называю «Btn» и «Btn2» по-разному.

Когда я нажимаю на 1 и 2, они оба открывают один и тот же текст из одной недели и 2.

Answer 1

Причина, почему вы видите то же самое содержание, потому что вы ориентируетесь же модальность:

btn.onclick = function() { 
    modal.style.display = "block"; 
} 

btn2.onclick = function() { 
    modal.style.display = "block"; <--- should be modal2 
} 

Answer 2

Попробуйте добавить атрибут данных для модального. Вы должны же id в вашем модальный с тем же data-target для кнопки

экс

<!-- MODAL INFORMATION FOR WEEK 1 --> 
<div id="myModalA" class="modal"> 
    <div class="modal-content"> 
     <span class="close">×</span> 
    <p><h2><font color="black">Week 1</font></h2></p> 
    <div class="modal-body"> 
     <p><font color="black"> ex1</p> 
    </div> 
    </div> 
</div> 


<div id="myModal2" class="modal"> 
    <div class="modal-content"> 
     <span class="close">×</span> 
    <p><h2><font color="black">Week 2</font></h2></p> 
     <p><font color="black"> Example 1 </p> 
    </div> 
</div> 


<li type="button" id="myBtn" class="w3-hide-small w3-center" data-target="myModalA"><a href="#" class="w3-hover-white">1</a></li> 


<li type="button" id="myBtn2" class="w3-hide-small w3-center" data-target="myModal2"><a href="#" class="w3-hover-white">2</a></li>