@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";
}
  • Вопрос задан
  • 42 просмотра
Пригласить эксперта
Ответы на вопрос 1
@andreysuha
Что то знаю
Вешаете клик на подложку и ловите е.target если это подложка, то закрываете изображение.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
от 30 000 до 65 000 руб.
BSSL Москва
от 50 000 до 150 000 руб.
от 60 000 до 90 000 руб.
16 июл. 2019, в 00:49
15000 руб./за проект
15 июл. 2019, в 23:17
3000 руб./за проект
15 июл. 2019, в 23:03
1000 руб./за проект