Samhain
Hectopat
Daha fazla
- Sistem Özellikleri
- MSI B350M PC Mate, MSI 1060 6GB 6G OC V1, Ryzen 5 1600, G.Skill xflare 2400mhz 2x8GB Ram, 120GB Transcend SSD,240GB SSD Kingston, 240GB Sandisk, 1TB WD HDD, Zalman Z3 Plus 600+,Viewsonic xg2401 144hz 24"
- Cinsiyet
- Erkek
- Meslek
- Bilgi İşlem / Sistem Destek Uzmanı
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";
}
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";
}
