Develop Reference

Model Image for gallery function can't be used on many image

Hello guys so im trying to make model image function for my gallery but I can't use the function on many image, any suggestion on how fix it ? can I change the var img to collect the element by class name? Thanks before.
Here's the code:
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
</div>
<div class="container-fluid padding gallerysection text-center" style="padding-bottom:30px;">
<div class="row padding fadeineffect">
<div class="col-lg-6">
<img id="modalImg" src="img/gallery/MR4.jpg" alt="MR Cello 1" class="galleryphoto img-fluid">
</div>
<div class="col-lg-6">
<img src="img/gallery/MR5.jpg" alt="MR Cello 2" class="galleryphoto img-fluid">
</div>
</div>
</div>
My CSS Code:
/* 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.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 100%;
max-width: 850px;
}
My Java script Code:
// Get the modal
var modal = document.getElementById("myModal");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("modalImg");
var modalImg = document.getElementById("img01");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}

Working with multiple images means working with a collection. For collection work, method forEach works well:
[].forEach.call(img, function (img_curr) {
img_curr.onclick = function () {
modal.style.display = "block";
modalImg.src = this.src;
};
});
img_curr - the current image from the collection.
Use class modalImg for all img tag.
var modal = document.getElementById("myModal");
var img = document.getElementsByClassName("modalImg");
var modalImg = document.getElementById("img");
[].forEach.call(img, function (img_curr) {
img_curr.onclick = function () {
modal.style.display = "block";
modalImg.src = this.src;
};
});
var span = document.getElementsByClassName("close")[0];
span.onclick = function () {
modal.style.display = "none";
};
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.9);
}
.modal-content {
margin: auto;
display: block;
width: 100%;
max-width: 850px;
}
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img" />
</div>
<div class="container-fluid padding gallerysection text-center" style="padding-bottom: 30px;">
<div class="row padding fadeineffect">
<div class="col-lg-6">
<img
class="modalImg"
src="https://lh3.googleusercontent.com/proxy/fl8D7wz4UGOL2OsOcYv_bLp6MBpsC5k_vCp1BhP-pUYcqXlUG1bJuCjRsWAWf2YLPt2pRCiUhd0tf3B4NismlNC5tBl6Ru1XOspcdp4U8ZGr9wCGYEri5ikCWn4YAJEmJNysu8KrlZVpdQ9sfg"
alt="MR Cello 1"
class="galleryphoto img-fluid"
/>
</div>
<div class="col-lg-6">
<img
class="modalImg"
src="https://lh3.googleusercontent.com/proxy/Y_PJq-iHuV0SwCw7t54ZZnk5WGXT6CLBsq2zsHb9VZnqx3R7M-Yk3_gVnwJa6cfns_x3HNvkuKV-q3e3VtTmQabjIDmazHwva2Bb2JIIxD4XOkRluLI-dm0cz1MDL_8Nd9tt7ACcxu_DAarebw"
alt="MR Cello 2"
/>
</div>
</div>
</div>

Why are my modal button images showing on top of my modal boxes?

So here's the thing: A project I'm doing for film school involves making a website. I am in absolutely no way supposed to be a professional (or even a good) programmer (in fact I'm pretty bad), but I wanted to make an old school 90s/2000s styled website.
I modified some code for modal boxes from https://www.w3schools.com/howto/howto_css_modals.asp and it worked out fine until I needed more modal boxes, because now, when I open the modal boxes, the one which is written first in the code shows up with the backdrop and everything, but the clickable image buttons for the subsequent modal boxes show up on top of the box and its backdrop. I'm not sure what's going on. I tried putting all the code in a single <script> tag and all the css in one <style> tag too, but it did nothing. I think I just don't know what I'm doing.
Sorry for the variable, id and class names being in Portuguese, I am Brazilian and this is for Brazilian college.
PS.: I realize there are like a trillion other huge HTML, CSS and JS sins in my code (such as all CSS and JSS being inline), so it's understandable if you cringe or puke instantly by looking at my code. This is because I hadn't coded in years and didn't have time to relearn the real logic behind everything, and also I am using a terrible sitebuilder which barely lets me use HTML, so I had to trick the site by writing all the code inside an HTML box widget. I think you have to pay for premium to actually use different CSS and JS files. So this is all workarounds on top of workarounds on top of workarounds.
<html>
<head>
</head>
<body bgcolor="#FF6842">
<style>
.container {
position: fixed;
top:150px;
}
.container2 {
position:relative;
right:20px;
}
.container3 {
position:relative;
}
#intro-j {
position:fixed;
top:196px;
left:44px;
color:#ffff00;
}
#balao {
position:fixed;
top:370px;
left:966px;
}
#bem-vindo {
position:fixed;
top:100px;
left:423px;
}
#logoblog {
position:fixed;
top:-2px;
left:51px;
}
#gaiola {
position:fixed;
top:450px;
left:330px;
}
#lona {
position:fixed;
left:248px;
top:15px;
}
#counter {
position:fixed;
top:540px;
left:170px;
}
#janela {
position:fixed;
top:170px;
left:15px;
}
#circo-gif-j {
position:fixed;
top:370px;
left:47px;
}
#menu {
position:fixed;
top:550px;
left:44px;
color:#00ff00;
}
#lc {
color:#00ff00;
}
#mesabolo {
position:fixed;
top:540px;
left:960px;
}
#bolo {
position:fixed;
top:470px;
left:1018px;
}
#computador {
position:fixed;
top:394px;
left:700px;
}
</style>
<div class="container">
<img src="https://i.imgur.com/0uGRDgL.png" alt="Cortinas" height="600px" width="1250px" id="bg">
<div id="mesabolo" class="container" class="container2" class="container3">
<img src="https://i.imgur.com/MKP2Ezx.png" height="170px">
<div id="janela" class="container" class="container2" class="container3">
<img src="https://i.imgur.com/TEFvChC.png">
<div id="intro-j" class="container">text</div>
<div id="circo-gif-j" class="container">
<img src="https://www.gif.ovh/portuguese-gif/Palha%C3%A7o%20Gif/Palha%C3%A7o%20Gif%20(21).gif">
</div>
<div id="menu" class="container"><b>• Cartas<br>• Contato</b></div>
</div>
<div id="lona" class="container" class="container2">
<img src="https://i.imgur.com/ZHX8oEe.png" height="700px">
<div id="counter" class="container" class="container2" class="container3">
<img src="https://i.imgur.com/pGkiIuH.png" height="200px" width="850px">
<div id="bem-vindo" class="container">
<img src="https://gifimage.net/wp-content/uploads/2018/05/seja-bem-vindo-gif-6.gif">
<div id="balao" class="container">
<img src="https://i.imgur.com/pcJDYM7.gif" height="90px">
</div>
<div id="logoblog" class="container">
<img src="https://i.imgur.com/CLC5YzA.gif">
<!--GAIOLA-->
<div id="gaiola" class="container">
<img src="https://i.imgur.com/zlmgazC.gif">
<style>
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
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: fixed;
background-color: #ffe38a;
height: 310px;
margin:auto;
left:210px;
top:190px;
}
.modal-body {padding: 2px 16px;}
#modal-text {
color:#c83434;
}
</style>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-body">
<p id="modal-text">modal text 1</p>
</div>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("gaiola");
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks anywhere outside of the modal, close it
window.addEventListener('click', function(event) {
if (event.target == modal) {
modal.style.display = "none";
modal2.style.display = "none";
}
});
</script>
</div>
<!--BOLO-->
<div id="bolo" class="container">
<img src="https://i.imgur.com/RjoYsYb.gif" height="90px">
<style>
/* The Modal (background) */
.modal2 {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
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-content2 {
position: fixed;
background-color: #ffe38a;
height: 350px;
margin:auto;
left:210px;
top:190px;
}
.modal-body2 {padding: 2px 16px;}
#modal-text2 {
color:#c83434;
}
</style>
<div id="myModal2" class="modal2">
<!-- Modal content -->
<div class="modal-content2">
<div class="modal-body2">
<p id="modal-text2">modal text 2<br></p>
</div>
</div>
</div>
<script>
// Get the modal
var modal2 = document.getElementById("myModal2");
// Get the button that opens the modal
var btn2 = document.getElementById("bolo");
// When the user clicks the button, open the modal
btn2.onclick = function() {
modal2.style.display = "block";
}
// When the user clicks anywhere outside of the modal, close it
window.addEventListener('click', function(event) {
if (event.target == modal2) {
modal2.style.display = "none";
modal.style.display = "none";
}
});
</script>
</div>
<!--COMPUTADOR-->
<div id="computador" class="container">
<img src="https://i.imgur.com/s4sHQ1V.gif" height="200px">
<style>
/* The Modal (background) */
.modal3 {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
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-content3 {
position: fixed;
background-color: #ffe38a;
height: 350px;
margin:auto;
left:210px;
top:190px;
}
.modal-body3 {padding: 2px 16px;}
#modal-text3 {
color:#c83434;
}
</style>
<div id="myModal3" class="modal3">
<!-- Modal content -->
<div class="modal-content3">
<div class="modal-body3">
<p id="modal-text3">modal text 3</p>
</div>
</div>
</div>
<script>
// Get the modal
var modal3 = document.getElementById("myModal3");
// Get the button that opens the modal
var btn3 = document.getElementById("computador");
// When the user clicks the button, open the modal
btn3.onclick = function() {
modal3.style.display = "block";
}
// When the user clicks anywhere outside of the modal, close it
window.addEventListener('click', function(event) {
if (event.target == modal3) {
modal3.style.display = "none";
}
});
</script>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

I am not 100% sure if I understood what you wanted to implement. However, The cause of the problem here might be from the complexity of how everything is in one place which leaves large room for mistakes.
Please try to
Place all your CSS should be placed in the head section if you won't use an external file.
Place your JavaScript properly in the head/before end of the body tag based on what it does. if you won't use an external file.
You don't need to duplicate CSS more than once if the group of elements will share the same style. just use the same class across those elements.
The modal should be pushed down to the bottom of the page to make it easier for your to modify your HTML file.
In cases like this one you should use loops and arrays to minimize the repition of actions (I do understand that you are completely new to it, this is why I am trying to tell you what you can look up.)
I modified your code and applied some changes now all you need to do if you will add a new modal is add a new line to the Array with both the modal's id and its container's id.
Your full page code be found at the bottom of my answer, the following is a snippet for you to preview the code. if this not what you needed can you please explain further maybe I can help?
//Array with a list of the modal id and conatiner id
var modalsArray = [
["modal1", "gaiola"],
["modal2", "bolo"],
["modal3", "computador"],
];
//stores the currently visible modal
var visibleModal;
// When the user clicks anywhere outside of the modal, close it
window.addEventListener("click", function(e) {
if (e.target == visibleModal) {
visibleModal.classList.remove("visible");
visibleModal = "";
document.getElementById('overlay').style.display = 'none';
}
});
//Iterate through the modalsArray and add a click event listener
for (let modal = 0; modal < modalsArray.length; modal++) {
document
.getElementById(modalsArray[modal][1])
.addEventListener("click", function(e) {
for (let mod = 0; mod < modalsArray.length; mod++) {
if (
e.target.offsetParent ==
document.getElementById(modalsArray[mod][1])
) {
//add the visible class to show the modal
document
.getElementById(modalsArray[mod][0])
.classList.add("visible");
//store the currently visible modal in the visible modal variable
visibleModal = document.getElementById(modalsArray[mod][0]);
// stops the click event from propagating up which would hide the modal again
document.getElementById('overlay').style.display = 'block';
e.stopPropagation();
}
}
});
}
.container {
position: fixed;
top: 150px;
}
.container2 {
position: relative;
right: 20px;
}
.container3 {
position: relative;
}
#intro-j {
position: fixed;
top: 196px;
left: 44px;
color: #ffff00;
}
#balao {
position: fixed;
top: 370px;
left: 966px;
}
#bem-vindo {
position: fixed;
top: 100px;
left: 423px;
}
#logoblog {
position: fixed;
top: -2px;
left: 51px;
}
#gaiola {
position: fixed;
top: 450px;
left: 330px;
}
#lona {
position: fixed;
left: 248px;
top: 15px;
}
#counter {
position: fixed;
top: 540px;
left: 170px;
}
#janela {
position: fixed;
top: 170px;
left: 15px;
}
#circo-gif-j {
position: fixed;
top: 370px;
left: 47px;
}
#menu {
position: fixed;
top: 550px;
left: 44px;
color: #00ff00;
}
#lc {
color: #00ff00;
}
#mesabolo {
position: fixed;
top: 540px;
left: 960px;
}
#bolo {
position: fixed;
top: 470px;
left: 1018px;
}
#computador {
position: fixed;
top: 394px;
left: 700px;
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
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: fixed;
background-color: #ffe38a;
height: 50%;
width: 50%;
margin: auto;
left: 25%;
top: 25%;
}
.modal-body {
padding: 2px 16px;
}
#modal-text {
color: #c83434;
}
.visible {
display: block !important;
z-index: 3;
}
#overlay {
position: fixed;
/* Sit on top of the page content */
display: none;
/* Hidden by default */
width: 100%;
/* Full width (cover the whole page) */
height: 100%;
/* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.7);
/* Black background with opacity */
z-index: 2;
/* Specify a stack order in case you're using a different order for other elements */
cursor: pointer;
/* Add a pointer on hover */
}
<body bgcolor="#FF6842">
<div class="container">
<img src="https://i.imgur.com/0uGRDgL.png" alt="Cortinas" height="600px" width="1250px" id="bg" />
<div id="mesabolo" class="container" class="container2" class="container3">
<img src="https://i.imgur.com/MKP2Ezx.png" height="170px" />
<div id="janela" class="container" class="container2" class="container3">
<img src="https://i.imgur.com/TEFvChC.png" />
<div id="intro-j" class="container">text</div>
<div id="circo-gif-j" class="container">
<img src="https://www.gif.ovh/portuguese-gif/Palha%C3%A7o%20Gif/Palha%C3%A7o%20Gif%20(21).gif" />
</div>
<div id="menu" class="container">
<b>• Cartas<br />• Contato</b>
</div>
</div>
<div id="lona" class="container" class="container2">
<img src="https://i.imgur.com/ZHX8oEe.png" height="700px" />
<div id="counter" class="container" class="container2" class="container3">
<img src="https://i.imgur.com/pGkiIuH.png" height="200px" width="850px" />
<div id="bem-vindo" class="container">
<img src="https://gifimage.net/wp-content/uploads/2018/05/seja-bem-vindo-gif-6.gif" />
<div id="balao" class="container">
<img src="https://i.imgur.com/pcJDYM7.gif" height="90px" />
</div>
<div id="logoblog" class="container">
<img src="https://i.imgur.com/CLC5YzA.gif" />
<!--GAIOLA-->
<div id="gaiola" class="container">
<img src="https://i.imgur.com/zlmgazC.gif" />
</div>
<!--BOLO-->
<div id="bolo" class="container">
<img src="https://i.imgur.com/RjoYsYb.gif" height="90px" />
</div>
<!--COMPUTADOR-->
<div id="computador" class="container">
<img src="https://i.imgur.com/s4sHQ1V.gif" height="200px" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal 1 - GAIOLA-->
<div id="modal1" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-body">
<p id="modal-text">modal text 1</p>
</div>
</div>
</div>
<!-- Modal 2 - Computador-->
<div id="modal2" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-body">
<p id="modal-text">modal text 2</p>
</div>
</div>
</div>
<!-- Modal 3 - Computador-->
<div id="modal3" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-body">
<p id="modal-text">modal text 3</p>
</div>
</div>
</div>
<div id="overlay"></div>
<html>
<head>
<style>
.container {
position: fixed;
top: 150px;
}
.container2 {
position: relative;
right: 20px;
}
.container3 {
position: relative;
}
#intro-j {
position: fixed;
top: 196px;
left: 44px;
color: #ffff00;
}
#balao {
position: fixed;
top: 370px;
left: 966px;
}
#bem-vindo {
position: fixed;
top: 100px;
left: 423px;
}
#logoblog {
position: fixed;
top: -2px;
left: 51px;
}
#gaiola {
position: fixed;
top: 450px;
left: 330px;
}
#lona {
position: fixed;
left: 248px;
top: 15px;
}
#counter {
position: fixed;
top: 540px;
left: 170px;
}
#janela {
position: fixed;
top: 170px;
left: 15px;
}
#circo-gif-j {
position: fixed;
top: 370px;
left: 47px;
}
#menu {
position: fixed;
top: 550px;
left: 44px;
color: #00ff00;
}
#lc {
color: #00ff00;
}
#mesabolo {
position: fixed;
top: 540px;
left: 960px;
}
#bolo {
position: fixed;
top: 470px;
left: 1018px;
}
#computador {
position: fixed;
top: 394px;
left: 700px;
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
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: fixed;
background-color: #ffe38a;
height: 50%;
width: 50%;
margin: auto;
left: 25%;
top: 25%;
}
.modal-body {
padding: 2px 16px;
}
#modal-text {
color: #c83434;
}
.visible {
display: block !important;
z-index: 3;
}
#overlay {
position: fixed;
/* Sit on top of the page content */
display: none;
/* Hidden by default */
width: 100%;
/* Full width (cover the whole page) */
height: 100%;
/* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.7);
/* Black background with opacity */
z-index: 2;
/* Specify a stack order in case you're using a different order for other elements */
cursor: pointer;
/* Add a pointer on hover */
}
</style>
</head>
<body bgcolor="#FF6842">
<div class="container">
<img src="https://i.imgur.com/0uGRDgL.png" alt="Cortinas" height="600px" width="1250px" id="bg" />
<div id="mesabolo" class="container" class="container2" class="container3">
<img src="https://i.imgur.com/MKP2Ezx.png" height="170px" />
<div id="janela" class="container" class="container2" class="container3">
<img src="https://i.imgur.com/TEFvChC.png" />
<div id="intro-j" class="container">text</div>
<div id="circo-gif-j" class="container">
<img src="https://www.gif.ovh/portuguese-gif/Palha%C3%A7o%20Gif/Palha%C3%A7o%20Gif%20(21).gif" />
</div>
<div id="menu" class="container">
<b>• Cartas<br />• Contato</b>
</div>
</div>
<div id="lona" class="container" class="container2">
<img src="https://i.imgur.com/ZHX8oEe.png" height="700px" />
<div id="counter" class="container" class="container2" class="container3">
<img src="https://i.imgur.com/pGkiIuH.png" height="200px" width="850px" />
<div id="bem-vindo" class="container">
<img src="https://gifimage.net/wp-content/uploads/2018/05/seja-bem-vindo-gif-6.gif" />
<div id="balao" class="container">
<a href="javascript:alert('---');"><img src="https://i.imgur.com/pcJDYM7.gif"
height="90px" /></a>
</div>
<div id="logoblog" class="container">
<img src="https://i.imgur.com/CLC5YzA.gif" />
<!--GAIOLA-->
<div id="gaiola" class="container">
<img src="https://i.imgur.com/zlmgazC.gif" />
</div>
<!--BOLO-->
<div id="bolo" class="container">
<img src="https://i.imgur.com/RjoYsYb.gif" height="90px" />
</div>
<!--COMPUTADOR-->
<div id="computador" class="container">
<img src="https://i.imgur.com/s4sHQ1V.gif" height="200px" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal 1 - GAIOLA-->
<div id="modal1" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-body">
<p id="modal-text">modal text 1</p>
</div>
</div>
</div>
<!-- Modal 2 - Computador-->
<div id="modal2" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-body">
<p id="modal-text">modal text 2</p>
</div>
</div>
</div>
<!-- Modal 3 - Computador-->
<div id="modal3" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-body">
<p id="modal-text">modal text 3</p>
</div>
</div>
</div>
<div id="overlay"></div>
<!--Scripts start-->
<script>
//Array with a list of the modal id and conatiner id
var modalsArray = [
["modal1", "gaiola"],
["modal2", "bolo"],
["modal3", "computador"],
];
//stores the currently visible modal
var visibleModal;
// When the user clicks anywhere outside of the modal, close it
window.addEventListener("click", function (e) {
if (e.target == visibleModal) {
visibleModal.classList.remove("visible");
visibleModal = "";
document.getElementById('overlay').style.display = 'none';
}
});
//Iterate through the modalsArray and add a click event listener
for (let modal = 0; modal < modalsArray.length; modal++) {
document
.getElementById(modalsArray[modal][1])
.addEventListener("click", function (e) {
for (let mod = 0; mod < modalsArray.length; mod++) {
if (
e.target.offsetParent ==
document.getElementById(modalsArray[mod][1])
) {
//add the visible class to show the modal
document
.getElementById(modalsArray[mod][0])
.classList.add("visible");
//store the currently visible modal in the visible modal variable
visibleModal = document.getElementById(modalsArray[mod][0]);
// stops the click event from propagating up which would hide the modal again
document.getElementById('overlay').style.display = 'block';
e.stopPropagation();
}
}
});
}
</script>
</body>
</html>

Modal Will Not Display

I am approximately 24 seconds away from lighting my underwear on fire in frustration.
Essentially, I am making a simple contact info form that will submit the inputs to an external PHP page for processing, and, relevant to this question, pops up a second modal upon submission that confirms to the user that the form was sent. Figuring out how to get the form to stay on the same page when you press 'submit' is a problem for another day; what I don't understand is why the second modal, the one that says "Thank you for your interest etc. etc.", will not appear when you hit the 'submit' button. It's driving me crazy!
Thanks for your help, I'm an amateur coder and am open to any and all advice/critique.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<style>
.modal {
display: none;
position: fixed;
z-index: 1;
overflow: scroll;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid;
width: 95%;
position: relative;
}
.modal2 {
display: none;
position: fixed;
z-index: 1;
overflow: scroll;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal2-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid;
width: 95%;
position: relative;
}
</style>
<button id="myButton">Contact</button>
<div id="myModal" class="modal">
<div action="" class="modal-content">
<span id="close">×</span>
<p class="formHeader">Let's Work Together...</p>
<p id="formSubheader">Name</p>
<input type="type" name="firstName" placeholder="First" class="inputBox1">
<input type="type" name="lastName" placeholder="Last" class="inputBox1">
<p id="formSubheader">Email</p>
<input type="email" name="email" placeholder="Example#Email.com" class="inputBox2">
<p id="formSubheader">Phone</p>
<input type="tel" name="phone" class="inputBox3" placeholder="###-###-####">
<p id="formSubheader">Project Description</p>
<textarea name="description" class="inputBox4"></textarea>
<br>
<button type="submit" id="myButton2">Submit</button>
</div>
</div>
<div id="myModal2" class="modal2">
<div class="modal2-content">
<span id="close">×</span>
<p class="formHeader2">Thank you for your interest. I will get back to you soon!</p>
</div>
</div>
<script>
var modal = document.getElementById("myModal");
var modal2 = document.getElementById("myModal2");
var btn = document.getElementById("myButton");
var btn2 = document.getElementById("myButton2");
var close = document.getElementById("close");
btn.onclick = function() {
modal.style.display = "block";
}
btn2.onclick = function() {
modal.style.display = "none";
modal2.style.display = "block";
}
close.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal)
modal.style.display = "none";
modal2.style.display = "none";
}
</script>
</body>
</html>

Your problem is this chunk of code here:
window.onclick = function(event) {
if (event.target == modal)
modal.style.display = "none";
modal2.style.display = "none";
}
I'm not sure what you are intending to do with that, but remember, if no curly braces are provided with your if statement, then only the line directly after your if condition will execute. Your second line will always execute. So you are effectively hiding modal2 on every single click event (since your listening to window.onclick). I don't think you want that.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<style>
.modal {
display: none;
position: fixed;
z-index: 1;
overflow: scroll;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid;
width: 95%;
position: relative;
}
.modal2 {
display: none;
position: fixed;
z-index: 1;
overflow: scroll;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
.modal2-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid;
width: 95%;
position: relative;
}
</style>
<button id="myButton">Contact</button>
<div id="myModal" class="modal">
<div action="" class="modal-content">
<span id="close">×</span>
<p class="formHeader">Let's Work Together...</p>
<p id="formSubheader">Name</p>
<input type="type" name="firstName" placeholder="First" class="inputBox1">
<input type="type" name="lastName" placeholder="Last" class="inputBox1">
<p id="formSubheader">Email</p>
<input type="email" name="email" placeholder="Example#Email.com" class="inputBox2">
<p id="formSubheader">Phone</p>
<input type="tel" name="phone" class="inputBox3" placeholder="###-###-####">
<p id="formSubheader">Project Description</p>
<textarea name="description" class="inputBox4"></textarea>
<br>
<button type="submit" id="myButton2">Submit</button>
</div>
</div>
<div id="myModal2" class="modal2">
<div class="modal2-content">
<span id="close">×</span>
<p class="formHeader2">Thank you for your interest. I will get back to you soon!</p>
</div>
</div>
<script>
var modal = document.getElementById("myModal");
var modal2 = document.getElementById("myModal2");
var btn = document.getElementById("myButton");
var btn2 = document.getElementById("myButton2");
var close = document.getElementById("close");
btn.onclick = function() {
modal.style.display = "block";
}
btn2.onclick = function() {
modal.style.display = "none";
modal2.style.display = "block";
}
close.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
modal2.style.display = "none";
}
}
</script>
</body>
</html>

Attmepting to close a popup using javascript

I'm a JS rookie, so be patient with me. I just created a js popup using this code https://www.w3schools.com/howto/howto_js_popup.asp and now I am attempting to add a simple close button to the top right corner to direct users to. I looked at some of the other close button threads and none of them seemed like they would integrate into my js code.

i Well searched "js close button" on the site which brought up several threads but none of them seemed to have an easy addition to the js script (Im assuming thats where the code should go). Again. Newbie.

Add a css class and simply display and hide it on button click
var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
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;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: lightBlue;
background-color: grey;
}
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
}
.close {
color: black;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-body {padding: 2px 16px;}
<button id="myBtn">Open Modal</button>
<div id="myModal" class="modal">
<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>

Why does my function call another page of my website instead of my modal?

I'm trying to launch a modal login window from a button. I've done some troubleshooting and the modal works until I place an unordered list with links to another page on my site.
When on index.html, the modal button takes me to the about.html page. When on that page and clicking the modal button again, the modal merely flashes, but does not stay visible.
Here's my HTML:
<nav>
<ul class="navMenu">
<li><a href="index.html">Home</li>
<li><a href="about.html">About</li>
</ul>
<ul class="userAccount">
<button id="myBtn"><i class="material-icons md-48 md-light">account_circle</i></button>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>
Some text in the modal...
</p>
<script src="js/userLoginModal.js"></script>
</div>
</div>
</ul>
</nav>
Here's my 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 on 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";
}
}

You didn't close the a tags, so everything from to the next or the end of the document is all placed inside the link.
Close the a tags:
<li>Home</li>
<!-- ^^^^ -->
same goes for other a tags in your document.

Here's a simple way to accomplish your task. Hope it helps!
function toggleOverlay(){
var overlay = document.getElementById('overlay');
var modal = document.getElementById('myModal');
overlay.style.opacity = .6;
if(overlay.style.display == "block"){
overlay.style.display = "none";
modal.style.display = "none";
} else {
overlay.style.display = "block";
modal.style.display = "block";
}
}
div#overlay {
display: none;
z-index: 2;
background: #000;
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
text-align: center;
}
div#myModal {
display: none;
position: relative;
z-index: 3;
margin: 150px auto 0px auto;
width: 400px;
height: 200px;
background: #FFF;
color: #000;
}
div#wrapper {
position:absolute;
top: 0px;
left: 0px;
padding-left:24px;
}
<div id="overlay"></div>
<div id="myModal">
<p>Some text in the modal... ...</p>
<button onmousedown="toggleOverlay()">Close</button>
</div>
<div id="wrapper">
<ul class="navMenu">
<li><a href="index.html">Home</li>
<li><a href="about.html">About</li>
</ul>
<button onmousedown="toggleOverlay()">account_circle</button>
</div>