CSS Stilizarea imaginilor. Imagine Modal (avansat).
Partajeaza in Google Classroom
Teorie: Descriere video Descarcă PDF
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";
}