in my web site i have a page where i put my photos. Now, i'am trying to create a JS function that allows me to display a photo, clicked by the user, in a bigger scale. To do that, when the user clicks in one photo, the class "modal" which contains other version of the photo (not croped), appears. This part is working as expected. The problem appears when i'am trying to close that bigger image. Can someone help me, based on the code i already did? (it´s for a university project and I would like to keep the code i already shown to the teacher). Tanks in advance.
var imagens = document.getElementsByClassName("imagens");
for(var i=0; i<imagens.length; i++){
imagens[i].addEventListener("click", function () {
//console.log(this.id);
var splitedId = this.id.split("-");
var IddivGrande = "grande-"+ splitedId[1];
var imagemGrande = document.getElementById(IddivGrande);
var modal = document.getElementById("modal");
modal.style.display="block";
imagemGrande.style.display="block";
var span = document.getElementsByClassName("close");
function clicar() {
var botao = document.querySelector("span").click();
}
if(clicar) {
modal.style.display = "none";
}
})
}body{
margin:0;
font-family: "Helvetica", serif;
}
/*main*/
article{
display: block;
position: relative;
width: 70%;
left: 50%;
transform: translateX(-50%);
margin-top:10%;
margin-bottom: 10%;
}
h3{
display: block;
position: relative;
top:0;
font-size: 15px;
width: 200px;
left: 50%;
transform: translateX(-50%);
margin-bottom: 50px;
}
body>main>article>img{
display: block;
position: relative;
left: 50%;
transform: translateX(-50%);
margin-top:10%;
}
#grande-01 {
display: none;
position: relative;
top:4%;
left: 50%;
transform: translateX(-50%);
}
#grande-02 {
display: none;
position: relative;
top:15%;
left: 50%;
transform: translateX(-50%);
}
#grande-03 {
display: none;
position: relative;
top:20%;
left: 50%;
transform: translateX(-50%);
}
#grande-04 {
display: none;
position: relative;
top:30%;
left: 50%;
transform: translateX(-50%);
}
#grande-05 {
display: none;
position: relative;
top:40%;
left: 50%;
transform: translateX(-50%);
}
#grande-06 {
display: none;
position: relative;
top:50%;
left: 50%;
transform: translateX(-50%);
}
#grande-07 {
display: none;
position: relative;
top:65%;
left: 50%;
transform: translateX(-50%);
}
#grande-08 {
display: none;
position: relative;
top:75%;
left: 50%;
transform: translateX(-50%);
}
#grande-09 {
display: none;
position: relative;
top:85%;
left: 50%;
transform: translateX(-50%);
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* The Close Button */
.close {
display: block;
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/*tablet---------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width: 768px){
article{
width: 80%;
}
h3{
font-size: 23px;
left: 0;
transform: none;
margin-left: 1%;
}
body>main>article>img{
display: inline-block;
left: 0;
transform: none;
margin: 0 1%;
margin-bottom: 5%;
}
#grande-01, #grande-02, #grande-03, #grande-04, #grande-05, #grande-06, #grande-07, #grande-08, #grande-09{
top:50%;
transform: translateY(-50%) translateX(-50%);
}
}
/*laptop----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width: 1024px){
article{
width: 90%;
}
h3{
font-size: 25px;
width: 350px;
}
}
/*laptopL----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width: 1440px){
h3{
font-size: 30px;
width: 400px;
}
}<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Portraits</title><link rel="stylesheet" type="text/css" href="css/css_portraits.css"><meta name="viewport" content="width=device-width,initial-scale=1"></head><body><main><article><h3>Portraits</h3><img class="imagens"
id="pequeno-01"
srcset="imagens/portraits/fotos_quadradas/Ines1_400.png 400w,
imagens/portraits/fotos_quadradas/Ines1_350.png 350w,
imagens/portraits/fotos_quadradas/Ines1_200.png 200w"
sizes="(min-width: 1440px) 400px,
(min-width: 1024px) 350px,
200px"
src="imagens/portraits/fotos_quadradas/Ines1_200.png" alt="Ines1"><img class="imagens"
id="pequeno-02"
srcset="imagens/portraits/fotos_quadradas/Ines2_400.png 400w,
imagens/portraits/fotos_quadradas/Ines2_350.png 350w,
imagens/portraits/fotos_quadradas/Ines2_200.png 200w"
sizes="(min-width: 1440px) 400px,
(min-width: 1024px) 350px,
200px"
src="imagens/portraits/fotos_quadradas/Ines2_200.png" alt="Ines2"><img class="imagens"
id="pequeno-03"
srcset="imagens/portraits/fotos_quadradas/Ines3_400.png 400w,
imagens/portraits/fotos_quadradas/Ines3_350.png 350w,
imagens/portraits/fotos_quadradas/Ines3_200.png 200w"
sizes="(min-width: 1440px) 400px,
(min-width: 1024px) 350px,
200px"
src="imagens/portraits/fotos_quadradas/Ines3_200.png" alt="Ines3"><img class="imagens"
id="pequeno-04"
srcset="imagens/portraits/fotos_quadradas/Rafa1_400.png 400w,
imagens/portraits/fotos_quadradas/Rafa1_350.png 350w,
imagens/portraits/fotos_quadradas/Rafa1_200.png 200w"
sizes="(min-width: 1440px) 400px,
(min-width: 1024px) 350px,
200px"
src="imagens/portraits/fotos_quadradas/Rafa1_200.png" alt="Rafa1"><img class="imagens"
id="pequeno-05"
srcset="imagens/portraits/fotos_quadradas/Rafa2_400.png 400w,
imagens/portraits/fotos_quadradas/Rafa2_350.png 350w,
imagens/portraits/fotos_quadradas/Rafa2_200.png 200w"
sizes="(min-width: 1440px) 400px,
(min-width: 1024px) 350px,
200px"
src="imagens/portraits/fotos_quadradas/Rafa2_200.png" alt="Rafa2"><img class="imagens"
id="pequeno-06"
srcset="imagens/portraits/fotos_quadradas/Rafa3_400.png 400w,
imagens/portraits/fotos_quadradas/Rafa3_350.png 350w,
imagens/portraits/fotos_quadradas/Rafa3_200.png 200w"
sizes="(min-width: 1440px) 400px,
(min-width: 1024px) 350px,
200px"
src="imagens/portraits/fotos_quadradas/Rafa3_200.png" alt="Rafa3"><img class="imagens"
id="pequeno-07"
srcset="imagens/portraits/fotos_quadradas/Sara1_400.png 400w,
imagens/portraits/fotos_quadradas/Sara1_350.png 350w,
imagens/portraits/fotos_quadradas/Sara1_200.png 200w"
sizes="(min-width: 1440px) 400px,
(min-width: 1024px) 350px,
200px"
src="imagens/portraits/fotos_quadradas/Sara1_200.png" alt="Sara1"><img class="imagens"
id="pequeno-08"
srcset="imagens/portraits/fotos_quadradas/Sara2_400.png 400w,
imagens/portraits/fotos_quadradas/Sara2_350.png 350w,
imagens/portraits/fotos_quadradas/Sara2_200.png 200w"
sizes="(min-width: 1440px) 400px,
(min-width: 1024px) 350px,
200px"
src="imagens/portraits/fotos_quadradas/Sara2_200.png" alt="Sara2"><img class="imagens"
id="pequeno-09"
srcset="imagens/portraits/fotos_quadradas/Sara3_400.png 400w,
imagens/portraits/fotos_quadradas/Sara3_350.png 350w,
imagens/portraits/fotos_quadradas/Sara3_200.png 200w"
sizes="(min-width: 1440px) 400px,
(min-width: 1024px) 350px,
200px"
src="imagens/portraits/fotos_quadradas/Sara3_200.png" alt="Sara3"><div class="modal" id="modal"><img id="grande-01"
srcset="imagens/portraits/fotos_grandes/Ines1_900.png 900w,
imagens/portraits/fotos_grandes/Ines1_600.png 600w,
imagens/portraits/fotos_grandes/Ines1_224.png 224w"
sizes="(min-width: 1440px) 900px,
(min-width: 768px) 600px,
224px"
src="imagens/portraits/fotos_grandes/Ines1_224.png" alt="imagem_grande1"><img id="grande-02"
srcset="imagens/portraits/fotos_grandes/Ines2_900.png 900w,
imagens/portraits/fotos_grandes/Ines2_600.png 600w,
imagens/portraits/fotos_grandes/Ines2_224.png 224w"
sizes="(min-width: 1440px) 900px,
(min-width: 768px) 600px,
224px"
src="imagens/portraits/fotos_grandes/Ines2_224.png" alt="imagem_grande2"><img id="grande-03"
srcset="imagens/portraits/fotos_grandes/Ines3_900.png 900w,
imagens/portraits/fotos_grandes/Ines3_600.png 600w,
imagens/portraits/fotos_grandes/Ines3_224.png 224w"
sizes="(min-width: 1440px) 900px,
(min-width: 768px) 600px,
224px"
src="imagens/portraits/fotos_grandes/Ines3_224.png" alt="imagem_grande3"><img id="grande-04"
srcset="imagens/portraits/fotos_grandes/Rafa1_900.png 900w,
imagens/portraits/fotos_grandes/Rafa1_600.png 600w,
imagens/portraits/fotos_grandes/Rafa1_224.png 224w"
sizes="(min-width: 1440px) 900px,
(min-width: 768px) 600px,
224px"
src="imagens/portraits/fotos_grandes/Rafa1_224.png" alt="imagem_grande4"><img id="grande-05"
srcset="imagens/portraits/fotos_grandes/Rafa2_900.png 900w,
imagens/portraits/fotos_grandes/Rafa2_600.png 600w,
imagens/portraits/fotos_grandes/Rafa2_224.png 224w"
sizes="(min-width: 1440px) 900px,
(min-width: 768px) 600px,
224px"
src="imagens/portraits/fotos_grandes/Rafa2_224.png" alt="imagem_grande5"><img id="grande-06"
srcset="imagens/portraits/fotos_grandes/Rafa3_900.png 900w,
imagens/portraits/fotos_grandes/Rafa3_600.png 600w,
imagens/portraits/fotos_grandes/Rafa3_224.png 224w"
sizes="(min-width: 1440px) 900px,
(min-width: 768px) 600px,
224px"
src="imagens/portraits/fotos_grandes/Rafa3_224.png" alt="imagem_grande6"><img id="grande-07"
srcset="imagens/portraits/fotos_grandes/Sara1_900.png 900w,
imagens/portraits/fotos_grandes/Sara1_600.png 600w,
imagens/portraits/fotos_grandes/Sara1_224.png 224w"
sizes="(min-width: 1440px) 900px,
(min-width: 768px) 600px,
224px"
src="imagens/portraits/fotos_grandes/Sara2_224.png" alt="imagem_grande7"><img id="grande-08"
srcset="imagens/portraits/fotos_grandes/Sara2_900.png 900w,
imagens/portraits/fotos_grandes/Sara2_600.png 600w,
imagens/portraits/fotos_grandes/Sara2_224.png 224w"
sizes="(min-width: 1440px) 900px,
(min-width: 768px) 600px,
224px"
src="imagens/portraits/fotos_grandes/Sara2_224.png" alt="imagem_grande8"><img id="grande-09"
srcset="imagens/portraits/fotos_grandes/Sara3_900.png 900w,
imagens/portraits/fotos_grandes/Sara3_600.png 600w,
imagens/portraits/fotos_grandes/Sara3_224.png 224w"
sizes="(min-width: 1440px) 900px,
(min-width: 768px) 600px,
224px"
src="imagens/portraits/fotos_grandes/Sara3_224.png" alt="imagem_grande9"><span class="close">×</span></div></article></main><script src="javaScript/js.js"></script><script src="javaScript/hamburguer.js"></script></body></html>