Here I put in 2 buttons where clicking these would popup a modal box.
<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>
Here's the modal information for week one:
<!-- 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>
Here's the modal information for week two:
<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:
<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>
I thought that changing the ID would allow me to treat the modal boxes differently from one another, and also that i'm calling "Btn" and "Btn2" differently.
When I click on 1 and 2, they both open up the same text from week one and 2.
The reason why you are seeing the same content is because you are targeting the same modal:
btn.onclick = function() {
modal.style.display = "block";
}
btn2.onclick = function() {
modal.style.display = "block"; <--- should be modal2
}
Try to add a data attribute for the modal. You need to same id
in your modal with the same data-target
for the button
ex
<!-- 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.