На моем веб-сайте есть страница, где я размещаю свои фотографии. Сейчас я пытаюсь создать функцию JavaScript, которая позволяет отображать фотографию, на которую щелкнул пользователь, в большем масштабе. Для этого, когда пользователь нажимает на одну фотографию, появляется класс «модальный», который содержит другую версию фотографии (не обрезанную). Эта часть работает как положено. Проблема возникает, когда я пытаюсь закрыть изображение большего размера. Кто-нибудь может мне помочь, основываясь на коде, который я уже сделал? (Это для университетского проекта, и я хотел бы сохранить код, который я уже показал учителю).

var imagens = document.getElementsByClassName("imagens"); for(var i=0; i{amp}lt;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{amp}gt;main{amp}gt;article{amp}gt;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{amp}gt;main{amp}gt;article{amp}gt;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; } } 
 {amp}lt;!DOCTYPE html{amp}gt; {amp}lt;html lang="en"{amp}gt; {amp}lt;head{amp}gt; {amp}lt;meta charset="UTF-8"{amp}gt; {amp}lt;title{amp}gt;Portraits{amp}lt;/title{amp}gt; {amp}lt;link rel="stylesheet" type="text/css" href="css/css_portraits.css"{amp}gt; {amp}lt;meta name="viewport" content="width=device-width,initial-scale=1"{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body{amp}gt; {amp}lt;main{amp}gt; {amp}lt;article{amp}gt; {amp}lt;h3{amp}gt;Portraits{amp}lt;/h3{amp}gt; {amp}lt;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"{amp}gt; {amp}lt;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"{amp}gt; {amp}lt;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"{amp}gt; {amp}lt;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"{amp}gt; {amp}lt;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"{amp}gt; {amp}lt;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"{amp}gt; {amp}lt;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"{amp}gt; {amp}lt;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"{amp}gt; {amp}lt;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"{amp}gt; {amp}lt;div class="modal" id="modal"{amp}gt; {amp}lt;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"{amp}gt; {amp}lt;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"{amp}gt; {amp}lt;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"{amp}gt; {amp}lt;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"{amp}gt; {amp}lt;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"{amp}gt; {amp}lt;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"{amp}gt; {amp}lt;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"{amp}gt; {amp}lt;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"{amp}gt; {amp}lt;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"{amp}gt; {amp}lt;span class="close"{amp}gt;{amp}amp;times;{amp}lt;/span{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/article{amp}gt; {amp}lt;/main{amp}gt; {amp}lt;script src="javaScript/js.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="javaScript/hamburguer.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;/html{amp}gt; 

Ирис Перейра

новый участник этого сайта. Будьте внимательны, спрашивая разъяснения, комментируя и отвечая. Проверьте наш

Правила поведения

,

 function clicar() { var botao = document.querySelector("span").click(); } if(clicar) { modal.style.display = "none"; } 

В приведенном выше коде вы вручную вызываете событие click . Вместо этого добавьте слушателя click . Кроме того, передача имени функции в операторе if всегда приводит к истинному значению.

Решение:

Добавьте прослушиватель click к документу, проверьте, является ли .close элемент .close , если да, то скрыть modal иначе ничего не делать.

 var imagens = document.getElementsByClassName("imagens"); for (var i = 0; i {amp}lt; imagens.length; i  ) { imagens[i].addEventListener("click", function() { 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"; }); } document.addEventListener('click', function(e) { if (!e.target.matches('.close')) return; document.querySelector('#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{amp}gt;main{amp}gt;article{amp}gt;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{amp}gt;main{amp}gt;article{amp}gt;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; } } 
 {amp}lt;article{amp}gt; {amp}lt;h3{amp}gt;Portraits{amp}lt;/h3{amp}gt; {amp}lt;img class="imagens" id="pequeno-01" srcset="https://placeimg.com/640/480/nature,https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_São_Paulo_Zoo.jpg" sizes="(min-width: 1440px) 400px, (min-width: 1024px) 350px, 200px" src="imagens/portraits/fotos_quadradas/Ines1_200.png" alt="Ines1"{amp}gt; {amp}lt;img class="imagens" id="pequeno-09" srcset="https://placeimg.com/640/480/nature, https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_São_Paulo_Zoo.jpg" sizes="(min-width: 1440px) 400px, (min-width: 1024px) 350px, 200px" src="https://placeimg.com/640/480/nature" alt="Sara3"{amp}gt; {amp}lt;div class="modal" id="modal"{amp}gt; {amp}lt;img id="grande-01" srcset="https://placeimg.com/640/480/nature 900w, https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_São_Paulo_Zoo.jpg 600w" sizes="(min-width: 1440px) 900px, (min-width: 768px) 600px, 224px" src="https://placeimg.com/640/480/nature" alt="imagem_grande1"{amp}gt; {amp}lt;span class="close"{amp}gt;{amp}amp;times;{amp}lt;/span{amp}gt; {amp}lt;img id="grande-09" srcset="https://placeimg.com/640/480/nature 900w, https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_São_Paulo_Zoo.jpg 600w" sizes="(min-width: 1440px) 900px, (min-width: 768px) 600px, 224px" src="https://placeimg.com/640/480/nature" alt="imagem_grande1"{amp}gt; {amp}lt;span class="close"{amp}gt;{amp}amp;times;{amp}lt;/span{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/article{amp}gt; 

——Редактировать—

Вместо того, чтобы иметь все изображения в modal разделе, добавьте только один тег img в modal и измените его src с помощью src clicked img.

 const modal = document.getElementById('modal'); document.querySelectorAll('article {amp}gt; img').forEach(img ={amp}gt; { img.addEventListener('click', function() { modal.querySelector('img').src = this.src; modal.style.display = "flex"; modal.style.justifyContent = "center"; }); }); document.addEventListener('click', function(e) { if (!e.target.matches('.close')) return; 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; } /* 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{amp}gt;main{amp}gt;article{amp}gt;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; } } article{amp}gt;img { height: 400px; width: 400px; } 
 {amp}lt;article{amp}gt; {amp}lt;h3{amp}gt;Portraits{amp}lt;/h3{amp}gt; {amp}lt;img class="imagens" id="pequeno-01" src="https://interactive-examples.mdn.mozilla.net/media/examples/grapefruit-slice-332-332.jpg" alt="Ines1"{amp}gt; {amp}lt;img class="imagens" id="pequeno-09" src="https://placeimg.com/640/480/nature" alt="Sara3"{amp}gt; {amp}lt;div class="modal" id="modal"{amp}gt; {amp}lt;img src="" alt="Как закрыть div, который перекрывает экран"{amp}gt; {amp}lt;span class="close"{amp}gt;{amp}amp;times;{amp}lt;/span{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/article{amp}gt;