CSS Stilizarea imaginilor. Imagine Modal (avansat).

Susține Lectii-Virtuale!

Image Modal (Advanced)

Acesta este un exemplu pentru a demonstra modul în care CSS și JavaScript pot lucra împreună.
În primul rând, utilizați CSS pentru a crea o fereastră modală (dialog box) și ascundeți-o în mod implicit.
Apoi, utilizați un JavaScript pentru a afișa fereastra modală și pentru a afișa imaginea în interiorul modalului, atunci când un utilizator face click pe imagine:



Exemplu:

// Get the modal
var modal = document.getElementById('myModal');

// Obțineți imaginea și introduceți-o în interiorul modalului - folosiți textul „alt” ca o legendă
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

// Obțineți elementul <span> care închide modalul
var span = document.getElementsByClassName("close")[0];

// Când utilizatorul face clic pe <span>(x), închideți modalul
span.onclick = function() {
  modal.style.display = "none";
}