Lightbox

[UNCLEWILLY]

Hallo Leute,
ich bin noch relativ unerfahren was den Umgang mit Javascript angeht und versuche schon seit geraumer Zeit eine Lightbox zu erstellen. Mein Gedanke war es den schwarzen Hintergrund und das icon, zum Schließen der Lightbox, mit einer "function" über onclick=""; auszulösen. Das spart code (auch im css). Anschließend würde ich dann mit einem Eventlistener die spezifischen Inhalte einblenden lassen. (in die Lightbox soll nicht nur ein Bild sondern auch Text und Überschrift rein)
Ich habe es im Code mal auf das Wesentliche runtergebrochen. ^^

Viele Grüße,
UncleWilly

<div id="elements">
    <div class="styling div1" onclick="openModal();">
        Inhalt...
    </div>
    <div class="styling div2" onclick="openModal();">
        Inhalt...
    </div>
    <div class="styling div3" onclick="openModal();">
        Inhalt...
    </div>
    <div class="styling div4" onclick="openModal();">
        Inhalt...
    </div>
    <div class="styling div5" onclick="openModal();">
        Inhalt...
    </div>
</div>

<div id="modal">
    <div class="boxCont div1Cont">
        Inhalt Lightbox...
    </div>
    <div class="boxCont div2Cont">
        Inhalt Lightbox...
    </div>
    <div class="boxCont div3Cont">
        Inhalt Lightbox...
    </div>
    <div class="boxCont div4Cont">
        Inhalt Lightbox...
    </div> 
    <div class="boxCont div5Cont">
        Inhalt Lightbox...
    </div>
    <i class="fas fa-times" onclick="closeModal()"></i>
</div>

<script>
        function openModal() {
            document.getElementById('modal').style.display = "block";
        }
    
        function closeModal() {
            document.getElementById('modal').style.display = "none";
        }

        
        
        document.getElementsByClassName('div1').addEventListener("click", div1event, false);
    
        function div1event() {
            document.getElementsByClassName('div1Cont').style.display = "block";
        }

        document.getElementsByClassName('div2').addEventListener("click", div2event, false);
    
        function div1event() {
            document.getElementsByClassName('div2Cont').style.display = "block";
        }
        .
        .
        .
</script>

 

[ComFreek]

Hallo UncleWilly,

leider hast du deine Frage vergessen Falls es sich um ein Nichtfunktionieren / Fehlverhalten handelt, so füge bitte auch die genaue Fehlermeldung ein.