Что добавить чтобы изображение возвращалось в исходный размер не только по клик на крестик но также при клике на любое место за пределами изображения?

Question

[nathan111777]

У меня есть код (модальное изображение) который делает так что при клике на изображение оно становится больше и при клике на крестик возвращается в исходный размер .Что добавить в коде чтобы оно возвращалось в исходный размер не только по клику на крестик но и также при клике на любое место за пределами изображения.

<div class="portfolio-container">
<div class="foto-container">
 <img class="foto-portfolio" src="http://dom.temp21.ua/images/_ads/original/12635_1.jpg" style="width:100%;max-width:300px">
</div>
<div class="foto-container">
 <img class="foto-portfolio" src="https://image.winudf.com/v2/image/Y29tLndhbGxwYXBlcnMuYWhkcGlfc2NyZWVuXzE1X3I1ZXd1NGZz/screen-15.jpg?fakeurl=1&type=.jpg" style="width:100%;max-width:300px">
</div>
<div class="foto-container">
 <img class="foto-portfolio" src="https://cdn2.outdoorphotographer.com/2018/12/figure-1.jpg" style="width:100%;max-width:300px">
</div>
</div>

.portfolio-container{
    margin-left:260px;
    margin-right:230px;
    
    
}
.foto-container{
    float:left;
    width:18%;
    margin:9px;
    height: auto;
    
}

.foto-portfolio{
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

.foto-portfolio:hover {opacity: 0.7;}


.modal-portfolio {
  display: none; 
  position: fixed; 
  z-index: 100; 
  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.7);
}


.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}


#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

var modal = document.getElementById('myModal');
var modalImg = document.getElementById("img01");
var modal = document.getElementById('myModal');
var img = document.getElementsByClassName("foto-portfolio");

for( var i = 0; i < img.length; i++){
  img[i].addEventListener('click', function(){
    modal.style.display = "block";
    modalImg.src = this.src;
  });
}

var span = document.getElementsByClassName("close")[0];
span.onclick = function() { 
  modal.style.display = "none";
}

Answer 1

[Andrey Suha]

Вешаете клик на подложку и ловите е.target если это подложка, то закрываете изображение.

Comments

[nathan111777]

я вас не понял, можете редактировать мой JS код и повесить клик так как нужно что б ловить е.target? Я просто новичок даже не представляюю как это сделать...

[Andrey Suha]

nathan111777, код редактировать не буду. Могу подсказать что клик это событие которое имеет свой объект у этого объекта есть свойство target, елемент на котором случилось событие, поймать событие можно так

element.addEventListener("click", function (event){
       // При клике event будет объект события, попробуйте вывести его в консоль и посмотреть что в нем есть
})

[Шохрух Шаймардонов]

Andrey Suha, по мне можно не в elem а сразу в window вешать

[Andrey Suha]

Шохрух Шаймардонов, не совсем понял, это сарказм?)

[Шохрух Шаймардонов]

Andrey Suha, нет, почему, предлагая вариант, вместо подложки вешать листенер в window. Возможно ошибаюсь, поправьте если так

[Andrey Suha]

Шохрух Шаймардонов, я просто не видел ещё что бы на window вешали обработчики событий ну разве что onload, click обычно на body вешают, по этому и подумал что в чем то ошибся, а Ваш коммент сарказм. По сабжу мне все же кажется лучше вешать на подложку, какой смысл ловить каждый клик на странице если он нужен только на конкретном елемете))

[Шохрух Шаймардонов]

Andrey Suha, тут нет неверных вариантов. Цель в обоих вариантах будет достигнута

[Andrey Suha]

Шохрух Шаймардонов, окей, пусть так)) я не спорю