Popup JavaScript mehrfach auf 1 Seite?

system · 10. Februar 2014 um 21:19

Hallo,

auf dieser Seite http://wanjapflueger.de/a/ habe ich eine alternative Fotogalerie gebastelt und jedes Foto mit einem hübschen Bildchen zum anklicken für ein Popup-Fenster im oberen rechten Bereich versehen…

Soweit so gut ABER:

Sobald ich die Funktion des Popup-Fensters 2-Mal auf der Seite -also in jedes meiner hübschen Fotos einen Link zu einem anderen PopupFenster- implementiere (ich vermute mal es liegt am Java, dass dort eine Wiederholung nicht möglich ist…), funktioniert nur der erste Link…

Im folgenden die essentiellen Code-Zeilen:

Java:

[CODE]
[/CODE]

CSS:

[CODE]#overlay {
cursor:default;

display:none;   
position:fixed; 
left:0px;       
top:0px;        
width:100%;     
height:100%;    
background:#000;
opacity:0.8;    
z-index:99999;

}

#popup {
cursor:default;
font-size:25px;
display:none;
position:fixed;
left:50%;
top:50%;
width:500px;
height:100px;
vertical-align:middle;
line-height:100px;
text-align:center;
margin-top:-50px;
margin-left:-250px;
background:rgba(255,255,255,0.7);
-webkit-box-shadow: 0px 40px 18px -32px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 40px 18px -32px rgba(0,0,0,0.75);
box-shadow: 0px 10px 18px 0px rgba(0,0,0,0.75);
z-index:100000;

}
#Link {
z-index:9999;
cursor:pointer;
width:20px;
height:20px;
background-image:url(Flaticon_3665.png);
background-size:cover;
position:absolute;
top:50px;
right:20px;
}
#CloseBtn {
cursor:pointer;
}
[/CODE]

HTML:

[CODE]

http://www.wanjapflueger.de/

[/CODE]

threadi · 10. Februar 2014 um 22:15

Du hast da kein Java sondern JavaScript.

Du hast IDs mehrfach verwendet - das ist in HTML nicht zulässig und auch Ursache für dein Problem mit deinem JavaScript. Korrigiere also zuerst deinen HTML-Code, so dass der Validator nicht mehr meckert:
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwanjapflueger.de%2Fa%2F%23

system · 11. Februar 2014 um 13:44

Kann ich denn document.getElementById("") durch document.getElementByClassName("") einfach ersetzen? Ich will ja nicht für jedes popup ein separates scribt schreiben…

Edit: Habs versucht:

[CODE]
[/CODE]

und alle id=„“ in class=„“ umgewandelt, jetzt geht gar nix mehr…

Tronjer · 11. Februar 2014 um 14:24

nd alle id=„“ in class=„“ umgewandelt, jetzt geht gar nix mehr…

Weil du die Elemente nicht als Strings übergibst?

Aber warum schreibst du das eigentlich in vanilla JS? Mit jQuery wäre es kürzer und einfacher zu lesen:

$('.CloseBtn').on('click', function() { $('.overlay, .popup').hide(); });

system · 11. Februar 2014 um 15:18

Nur noch mal zum Verständnis:

Die abgespeckt Version mit id=„…“ sieht so aus:

Script:

[CODE]
[/CODE]

CSS:

#overlay { cursor: default; display: none; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; background: #000; opacity: 0.8; z-index: 99999; } #popup { cursor: default; font-size: 25px; display: none; position: fixed; left: 50%; top: 50%; width: 500px; height: 100px; vertical-align: middle; line-height: 100px; text-align: center; margin-top: -50px; margin-left: -250px; background: rgba(255,255,255,0.7); z-index: 100000; } #OpenBtn { z-index: 9999; cursor: pointer; width: 20px; height: 20px; background-image: url(Flaticon_3665.png); background-size: cover; position: absolute; top: 50%; left: 50%; margin-left: -10px; margin-top: -10px; } #CloseBtn { cursor: pointer; }

HTML:

[CODE]

Text

[/CODE]

Wie meinen Sie das?

Ersetzt das dann das gesamte Script? Hab jQuery nicht im Repertoire…