HTML popup komutu

Selamlar herkese,
Aşağıda HTML, CSS ve JS kodlarıyla resme tıklayınca popup olarak resmin büyüğü açılıyor bunda sorun yok ama aynı kodları diğer resimler için de yapıştırdığımda "the ID must be unique, the class must be unique tarzı hatalar alıyorum. Sanırım CSS de yazılı olan kodlar sadece bir kere kullanılabiliyor. Diğer resimleri de popup olarak açabilmem için ne yapmam lazım?



CSS.
/* Style the ımage used to trigger the modal */
#Myımg {
Border-radius: 5px;
Cursor: Pointer;
Transition: 0.3s;
}

#Myımg: Hover {opacity: 0.7;}

/* The modal (background) */
Modal {
Display: None; /* hidden by default */
Position: Fixed; /* stay in place */
Z-index: 1; /* sit on top */
Padding-top: 100px; /* location of the box */
Left: 0;
Top: 0;
Width: 100%; /* Full width */
Height: 100%; /* Full height */
Overflow: Auto; /* enable scroll if needed */
Background-color: RGB(0, 0, 0); /* fallback color */
Background-color: Rgba(0, 0, 0,0.9); /* Black w/ opacity */
}

/* Modal content (ımage) */
Modal-content {
Margin: Auto;
Display: Block;
Width: 80%;
Max-width: 700px;
}

/* Caption of modal ımage (ımage text) - same width as the ımage */
#Caption {
Margin: Auto;
Display: Block;
Width: 80%;
Max-width: 700px;
Text-align: Center;
Color: #ccc;
Padding: 10px 0;
Height: 150px;
}

/* Add animation - Zoom'in the modal */
Modal-content, #caption {
Animation-name: Zoom;
Animation-duration: 0.6s;
}

@Keyframes Zoom {
From {transform: Scale(0)}
To {transform: Scale(1)}
}

/* The close button */
Close {
Position: Absolute;
Top: 15px;
Right: 35px;
Color: #f1F1F1;
Font-size: 40px;
Font-weight: Bold;
Transition: 0.3s;
}

Close: Hover,
Close: Focus {
Color: #bbb;
Text-decoration: None;
Cursor: Pointer;
}

/* 100% ımage width on smaller screens */
@Media only screen and (Max-width: 700px){
.Modal-content {
Width: 100%;
}
}
-------------------------------------------------------------------------------------------------
JavaScript.
// Get the modal.
Var modal = document. Getelementbyıd("mymodal");

// Get the image and insert it Inside the modal - use its "alt" text as a caption.
Var img = document. Getelementbyıd("myımg");
Var modalımg = document. Getelementbyıd("img01");
Var captiontext = document. Getelementbyıd("caption");
İmg. Onclick = function(){
Modal. Style. Display = "block";
Modalımg. Src = this. Src;
Captiontext. İnnerhtml = this. Alt;
}

// Get the <span> element that closes the modal.
Var span = document. Getelementsbyclassname("close")[0];

// When the user clicks on <span> (X), close the modal.
Span. Onclick = function() {
Modal. Style. Display = "none";
}

Konudan alakasiz kendini nasil gelistirdin?

HTML kısmını da kod olarak atabilir misin?
Kodları kod ekle kısmından eklersen sevinirim.

Hata mesajından da anlaşılacağı üzere id değeri benzersiz olmalıdır. Muhtemelen bir img etiketine ya da div etiketine verdiğiniz id değerini bir başka yerde yine kullanıyorsunuz.

HTML dosyandaki myImg ve myModel IDlerini kopyaladığında çakışma oluyor. Bu ID'ler unique olmalı. Bunları myImg1 ve myModel1 gibi yeni isim verebilirsin.

Ancak CSS dosyan ID'ler üzerinden gidiyor ki bu pek uygun bir tasarım değil. Class name üzerinden devam etmen daha doğru olur.

imgover {
Border-radius: 5px;
Cursor: Pointer;
Transition: 0.3s;
}

imgover: Hover {opacity: 0.7;}

Bunun dışında JavaScript üzerinden de Getelementbyıd("myımg1"); ile yeni image e ulaşabilirsin.

Bootstrap popup'larını inceyebilirsin. Ne mantıkla çalıştığını da daha rahat bir şekilde görebilirsin böylelikle.

sivurant dedi:

Konudan alakasiz kendini nasil gelistirdin?

Genişletmek için tıkla...

Hocam lise zamanında temelini görmüştüm. Hazır template üzerinde uğraşa uğraşa artık neyin olduğunu anlıyorsun CSS, Java ile bağlantısını html içerisindeki div yapısını falan kavrıyorsun bir yerden sonra tasarımı kendin yapabiliyorsun. Tabi template'e ihtiyaç duymadan yapmak için css js yapısını iyice bilmek lazım.

Sorunu çözemediyseniz yardımcı olayım size.
"id" dediğimiz tür unique türdür yani eşi benzeri, bir teki daha olmayan bir türdür. Dolayısıyla aynı ID ile 2 tane veya 3 tane farklı resim açamazsınız her görsel için yukarıdaki kod blogu içerisindeki myImg id'i her görsele myImg1,myImg2,myImg3 olarak değiştirip yapmanız gerekiyor.

Gunesibrahim dedi:

Sorunu çözemediyseniz yardımcı olayım size.
"id" dediğimiz tür unique türdür yani eşi benzeri, bir teki daha olmayan bir türdür. Dolayısıyla aynı ID ile 2 tane veya 3 tane farklı resim açamazsınız her görsel için yukarıdaki kod blogu içerisindeki myImg id'i her görsele myImg1,myImg2,myImg3 olarak değiştirip yapmanız gerekiyor.

Genişletmek için tıkla...

Bu şekilde yaptım hocam. Bu konuda temel bilgilere sahibim diyebilirim. Daha temiz bir kodlama bulursam ona yönelirim teşekkürler.

Samhain dedi:

Bu şekilde yaptım hocam. Bu konuda temel bilgilere sahibim diyebilirim. Daha temiz bir kodlama bulursam ona yönelirim teşekkürler.

Genişletmek için tıkla...

Hocam temiz bir diğer yöntem ise querySelector kullanarak yapmanız olur. Class üzerinden Js'e çağırırsınız ve bu sayede çok fazla kod kalabalığı içerisine girmezsiniz.
Örneğin ;
[CODE title="Sizin Yazdığınız"]Var img = document. Getelementbyıd("myımg");
Var modalımg = document. Getelementbyıd("img01");[/CODE]

[CODE title="Yenisi"]var img = document.querySelector('.imgover');
var modalImg = document.querySelector('.modal-content');

müsait olunca bu şekilde deneyin sonucu görüntüleyin hata alırsanız yazın bakalım beraber.[/CODE]