Popup JavaScript mehrfach auf 1 Seite?

[wanjapflueger]

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:

<script language="JavaScript" type="text/javascript">

window.onload = function() {
  document.getElementById("Link").onclick = function(){
        var overlay = document.getElementById("overlay");
        var popup = document.getElementById("popup");
        overlay.style.display = "block";
        popup.style.display = "block";
    };
   
  document.getElementById("CloseBtn").onclick = function(){
        var overlay = document.getElementById("overlay");
        var popup = document.getElementById("popup");
        overlay.style.display = "none";
        popup.style.display = "none";     
  }
};
</script>

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);
    -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;
}

HTML:

  <div>
<div id="Link"></div>
<div id="overlay"></div>
<div id="popup">
<a href="#">http://www.wanjapflueger.de/</a>
<font id="CloseBtn"><img class="xclose" src="Flaticon_9161.png" width="15" height="15"></font>
</div>
</div>

 

[threadi]

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://wanjapflueger.de/a/#

 

[wanjapflueger]

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:

<script type="text/javascript">

window.onload = function() {
  document.getElementsByClassName(Link).onclick = function(){
        var overlay = document.getElementsByClassName(overlay);
        var popup = document.getElementsByClassName(popup);
        overlay.style.display = "block";
        popup.style.display = "block";
    };
   
  document.getElementsByClassName(CloseBtn).onclick = function(){
        var overlay = document.getElementsByClassName(overlay);
        var popup = document.getElementsByClassName(popup);
        overlay.style.display = "none";
        popup.style.display = "none";     
  }
};
</script>

und alle id="" in class="" umgewandelt, jetzt geht gar nix mehr...

 

[Tronjer]

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();
});

 

[wanjapflueger]

Nur noch mal zum Verständnis:

Die abgespeckt Version mit id="..." sieht so aus:

Script:

<script language="JavaScript" type="text/javascript">

window.onload = function() {
  document.getElementById("OpenBtn").onclick = function(){
        var overlay = document.getElementById("overlay");
        var popup = document.getElementById("popup");
        overlay.style.display = "block";
        popup.style.display = "block";
    };
   
  document.getElementById("CloseBtn").onclick = function(){
        var overlay = document.getElementById("overlay");
        var popup = document.getElementById("popup");
        overlay.style.display = "none";
        popup.style.display = "none";     
  }
};
</script>

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:

<body>
<div>
<div id="OpenBtn"></div>
<div id="overlay"></div>
<div id="popup"> <a href="#">Text</a> <font id="CloseBtn"><img src="Flaticon_9161.png" width="15" height="15"></font> </div>
</body>

Weil du die Elemente nicht als Strings übergibst?

Wie meinen Sie das? :)

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();
});

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