We Keep Coding

Multiple Modals not closing when I click on the X button

The modals that I have set up for my website are opening on clicking the respective div elements and they're closing as well when clicking outside the modals but they're not closing on clicking the 'X' buttons, except for the very first modal.
{% for i in range(anime_name|length)%}
<!-- The Modal -->
<div id = "more-details1" class = "modal">
<!-- More details content -->
<div class = "more-details-content">
<div class = "modal-header">
<span class = "close" id = "close_{{i}}">×</span>
<p> {{ anime_name[0] }} </p>
</div>
<div class = "modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
</div>
</div>
{% endfor %}
{% for i in range(anime_name|length)%}
<!-- The Modal -->
<div id = "more-details2" class = "modal">
<!-- More details content -->
<div class = "more-details-content">
<div class = "modal-header">
<span class = "close" id = "close_{{i}}">×</span>
<p> {{ anime_name[1] }} </p>
</div>
<div class = "modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
</div>
</div>
{% endfor %}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.more-details-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
#keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: #f6e8d6;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover, .close:focus {
color: #222222;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #b83333;
color: #f6e8d6;
}
.modal-body {padding: 2px 16px;}
var modal1 = document.getElementById("more-details1")
var btn1 = document.querySelector(".anime-holder_0")
var span = document.getElementsByClassName("close")[0];
// var span1 = document.getElementById("close_0");
var modal2 = document.getElementById("more-details2")
var btn2 = document.querySelector(".anime-holder_1")
// var span2 = document.getElementById("close_1");
window.onclick = function(event) {
if(btn1.contains(event.target)){
modal1.style.display = "block";
} else {
if (!modal1.contains(event.target) && modal1.style.display === "block" || span.contains(event.target)) {
modal1.style.display = "none";
}
}
if (event.target == modal1) {
modal1.style.display = "none";
}
if(btn2.contains(event.target)){
modal2.style.display = "block";
} else {
if (!modal2.contains(event.target) && modal2.style.display === "block" || span.contains(event.target)) {
modal2.style.display = "none";
}
}
if (event.target == modal2) {
modal2.style.display = "none";
}
}
I'm using the jinja template to access the values from my dataframe in the modal section but also because I tried giving individual IDs to each 'close' aka 'X' button through "close_{{i}}" (as that seems to be working when I'm accessing the 'anime-holder_0' and 'anime-holder_1' in btn1 and btn2 through 'anime-holder_{{i}}') so I tried doing that here too with different 'span' for each modal but that didn't work as the multiple modals didn't close on clicking 'X' except for the first one.
It could be because of the many conditions being given in the windows.onclick = function(event) {} but having a seperate function for each modal doesn't work either because it overrides the previous one.
I'm not sure what's the reason for this problem but I'm just looking for a way to close multiple modals by clicking on their 'X' buttons AND clicking outside the modals themselves (Hopefully without having to use Bootstrap).

HTML, JavaScript. How to display different information on the same popup window button

I would like to know how can I display different infromation on the same popup windows?
I'm using this example: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal
I find out to make few same button active I have to edit JavaScript code, convert buttons into classes.
<button class="myBtn">butoon 1</button>
<button class="myBtn">button 2</button>
<button class="myBtn">button 3</button>
JavaScript:
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btns = document.getElementsByClassName("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
for (var i = 0; i < btns.length; i++) {
btns[i].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";
}
}
But if I create few same buttons and change information in it I get the same information like in the first popup window. How can I solve this?

Use this code.
It works well for me.
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btns = document.getElementsByClassName("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
var modalText = document.getElementById('modal-text');
// When the user clicks the button, open the modal
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function(event) {
switch(event.target.innerHTML) {
case "button 1":
modalText.innerHTML = "First button Clicked";
break;
case "button 2":
modalText.innerHTML = "Second button Clicked";
break;
default:
modalText.innerHTML = "Third button Clicked";
}
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";
}
}
body {font-family: Arial, Helvetica, sans-serif;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<button class="myBtn">button 1</button>
<button class="myBtn">button 2</button>
<button class="myBtn">button 3</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p id="modal-text">Some text in the Modal..</p>
</div>
</div>

I cant get two HTML modals to show with CSS, JavaScript, and PHP

I am having trouble trying to get two different modals to show with two different buttons. On my actual website the buttons just show the incorrect modal but when I put it into an standalone HTML document we see the result is much different. One of the modals is showing on the screen before anyone hits a button and the second one shows with both button presses
Here is my standalone HTML Code
Any help is much appreciated, even a comment could help. I have about 3 hours into this problem ftr.
<html>
<head>
<style>
body {font-family: "Lato", sans-serif}
h1 {font-family: "Raleway", sans-serif,}
.mySlides {display: none}
p {
text-align: center;
font-size: 60px;
margin-top:0px;
}
.background {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<button class="bar-item button padding-large hover-red hide-small right" id="myBtnL">Login</button>
<button id="myBtn" class="bar-item button padding-large hover-red hide-small right">Register</button>
<div id="myModalL" class="modalL">
<div class="modal-content">
<span class="closeL">×</span>
<p>some text in the L modal</p>
</div>
</div>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
</body>
<script>
// Get the modal
var modalL = document.getElementById('myModalL');
// Get the button that opens the modal
var btnL = document.getElementById("myBtnL");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("closeL")[0];
// When the user clicks the button, open the modal
btnL.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";
}
}
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>
</html>
</script>
</html>

So far what I see is that you had the class 'modal' written as 'modalL' on one of your modals. You've also got some other names done incorrectly - please check my revised example.
// Get the modal
var modalL = document.getElementById('myModalL');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the button that opens the modal
var btnL = document.getElementById("myBtnL");
// Get the <span> element that closes the modal
var span = document.getElementById("close");
var spanL = document.getElementById("closeL");
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks the button, open the modal
btnL.onclick = function() {
modalL.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks on <span> (x), close the modal
spanL.onclick = function() {
modalL.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";
}
}
body {font-family: "Lato", sans-serif}
h1 {font-family: "Raleway", sans-serif,}
.mySlides {display: none}
p {
text-align: center;
font-size: 60px;
margin-top:0px;
}
.background {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<html>
<body>
<button class="bar-item button padding-large hover-red hide-small right" id="myBtnL">Login</button>
<button id="myBtn" class="bar-item button padding-large hover-red hide-small right">Register</button>
<div id="myModalL" class="modal">
<div class="modal-content">
<span id="closeL" class="close">×</span>
<p>some text in the L modal</p>
</div>
</div>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span id="close" class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
</body>
</html>
</script>
</html>

<html>
<head>
<style>
body {font-family: "Lato", sans-serif}
h1 {font-family: "Raleway", sans-serif,}
.mySlides {display: none}
p {
text-align: center;
font-size: 60px;
margin-top:0px;
}
.background {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body onload="myFunction()">
<button class="bar-item button padding-large hover-red hide-small right" id="myBtnL">Login</button>
<button id="myBtn" class="bar-item button padding-large hover-red hide-small right">Register</button>
<div id="myModalL" class="modalL">
<div class="modal-content">
<span class="closeL">×</span>
<p>some text in the L modal</p>
</div>
</div>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
</body>
<script>
// Get the modal
var modalL = document.getElementById('myModalL');
// Get the button that opens the modal
var btnL = document.getElementById("myBtnL");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("closeL")[0];
// When the user clicks the button, open the modal
btnL.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";
}
}
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";
}
}
function myFunction() {
document.getElementById("myModalL").style.display = 'none';
}
</script>
</html>
</script>
</html>

Javascript won't work when i change the href

i trying THIS modal and when i'm try to show it, its only blinking, because it's refreshing..
i'm using this to run it:
<a href='index.php?id=".$id."' onclick='showDiag();'>
i change the $id according to choice of an item in my table
i edited JS a little:
// Get the modal
var modal = document.getElementById('myModal');
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
function showDiag() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onload = 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";
}
}
and later i getting values to modal content via
<h2><?php echo "#".$_GET['id']; ?></h2>
etc...
My question is: How i can change "?id=xx" so that javascript worked, to make content dynamically changed in one click?
Thanks so much for your answer!

Well, you have two options to make the modal work.
Replace your href value with something like href="#openmodal".
Keep your href value as it is and in your showDiag() method, add this line return false; Also change the onclick value to "return showDiag();"
For option one, it's straightforward, just replace the href value. For option two, below is the working example.
// 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
function showDiag() {
modal.style.display = "block";
return false;
}
// 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";
}
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
#keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.modal-body {
padding: 2px 16px;
}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
<a href='index.php?id=something' onclick='return showDiag();'>Click here</a>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
In case you want to get the href value for some other purposes, you can change your a tag to:
<a href='index.php?id=something' onclick='return showDiag(this);'>Click here</a>
And then, in your showDiag function, you can get the href value and use it as you need.
function showDiag(atag) {
modal.style.display = "block";
// Get href value
var href = atag.getAttribute('href');
// Use the href as your needs
return false;
}

Multiple contents based in same design modal

.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
font-size: 14px;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: black;
color: white;
margin: auto;
padding: 0;
border: 1px solid red;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
#keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: red;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: black;
color: white;
}
.modal-body {
padding: 2px 16px;
}
.album {
position: relative;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div class="album">
<img src="seventhalbum.jpg" alt="First Album" style="width:300;height300;">
<p></p>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Californication</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">X</span>
<h2>Californication</h2>
</div>
<div class="modal-body">
<p>1: Around the World</p>
<p>2: Parallel Universe</p>
<p>3: Scar Tissue</p>
<p>4: Otherside</p>
<p>5: Get on Top</p>
<p>6: Californication</p>
<p>7: Easily</p>
<p>8: Porcelain</p>
<p>9: Emit Remmus</p>
<p>10: I Like Dirt</p>
<p>11: This Velvet Glove</p>
<p>12: Savior</p>
<p>13: Purple Stain</p>
<p>14: Right on Time</p>
<p>15: Road Trippin'</p>
</div>
</div>
</div>
<p></p>
</div>
<div class="album">
<img src="eigthalbum.jpg" alt="First Album" style="width:300;height300;">
<p></p>
<!-- Trigger/Open The Modal -->
<button id="myBtn1">By the Way</button>
<!-- The Modal -->
<div id="myModal1" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close1">X</span>
<h2>By the Way</h2>
</div>
<div class="modal-body">
<p>1: By the Way</p>
<p>2: Universally Speaking</p>
<p>3: This Is the Place</p>
<p>4: Dosed</p>
<p>5: Don't Forget Me</p>
<p>6: The Zephyr Song</p>
<p>7: Can't Stop</p>
<p>8: I Could Die for You</p>
<p>9: Midnight</p>
<p>10: Through Away Your Television</p>
<p>11: Cabron</p>
<p>12: Tear</p>
<p>13: On Mercury</p>
<p>14: Minor Thing</p>
<p>15: Warm Tape</p>
<p>16: Venice Queen</p>
</div>
</div>
</div>
<script>
// 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>
<script>
// Get the modal
var modal = document.getElementById('myModal1');
// Get the button that opens the modal
var btn = document.getElementById("myBtn1");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close1")[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>
</body>
</html>
Im trying to have my page to where there are Multiple buttons that open up different Modal contents, but using the same script and css design. Im having an issue where it oly opens up one certain example. (By the Way album only displaying) how can I fix this issue, labeling the divs different did not work, atleast not for me. The two buttons in my snippet show the issue.

Change the var's in the second modal in the javascript that is different from the other.
See fiddle: https://jsfiddle.net/DIRTY_SMITH/7oe5kh9L/10/
// Get the modal
var modal1 = document.getElementById('myModal1');
// Get the button that opens the modal
var btn1 = document.getElementById("myBtn1");
// Get the <span> element that closes the modal
var span1 = document.getElementsByClassName("close1")[0];
// When the user clicks the button, open the modal
btn1.onclick = function() {
modal1.style.display = "block";
}
// When the user clicks on <span> (X), close the modal
span1.onclick = function() {
modal1.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal1) {
modal1.style.display = "none";
}
}