Вопросы Теги

Модальное изображение в HTML и CSS с Javascript

Может быть так: 

Options +FollowSymLinks
RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_HOST} ^OLDDOMAIN\.com$ [NC]
RewriteRule ^(.*)$ http://NEWDOMAIN.com [R=301,L]
0
задан Tri S Tan 1 March 2019 в 15:00
поделиться

1 ответ

Вот мой быстрый вариант чистого Javascript и простой галереи. Вы можете легко адаптировать его! Не стесняйтесь спрашивать разъяснения! 

var gallery = document.getElementById("gallery");
var imgs = gallery.children;

var modal = document.getElementById("modal");
var modal_img = modal.children[0];

for (var i = 0; i < imgs.length; i++) {
  imgs[i].onclick = function() {
    modal_img.src = this.src;
    modal.classList.add("show");
  }
}

// Close when clicking anywhere on modal not on img
modal.onclick = function(e) {
  if (e.target !== this)
    return;
    
  modal.classList.remove("show");
}
#gallery img {
  width: 75px;
  
  cursor: pointer;
}

#modal {
  display: none;
  
  text-align: center;
}

#modal.show {
  display: block;
}

#modal img {
  width: 250px;
  
  position: relative;
  z-index: 3;
}

#modal:before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 2;
  
  background-color: rgba(0,0,0,.8);
}
<div id="gallery">
  <img src="https://www.w3schools.com/w3css/img_lights.jpg" />
  <img src="https://cdn.pixabay.com/photo/2016/06/18/17/42/image-1465348_960_720.jpg" />
</div>
<div id="modal"><img src="" /></div>

0
ответ дан robinvrd 1 March 2019 в 15:00
поделиться