Antworten auf deine Fragen:
Neues Thema erstellen

Erledigt - [JS] Modalboxen über Klassen ansprechen.

dn3d_fanboy

Aktives Mitglied

Guten morgen zusammen,
ich habe anhand eines YT-Tutorials eine Modalbox mit HTML, CSS und Javascript erstellt, die nicht über IDs, sondern Klassen funktioniert. Mit einer einzigen Modalbox funktioniert das auch alles hervorragend:
https://jsfiddle.net/hrtc9fzv/

Nun soll das Ganze allerdings in eine dynamische WordPress-Seite eingebaut werden (auf einer Archivseite, wo sich dann die Klassen permanent wiederholen und ich nicht weiß, wieviele dieser Modalboxen erscheinen werden) und dementsprechend immer die jeweilige Modalbox mit dem entsprechenden Button aufgerufen werden.

Die Klassen bleiben also immer gleich.

Das wäre der Code soweit: https://jsfiddle.net/xcwf350x/

Habe ich da die Möglichkeit dem getElementsByClassName eine gewisse Range zu geben (also Element 1-20)?

Ich habe es zwar einfach mal in den Code gehauen, aber es hat, wie erwartet, nicht funktioniert. Ich muss dazu gestehen, dass meine JS-Kenntnisse nur sehr rudimentär sind.

Vielleicht kann mir hier jemand weiterhelfen, da ich über Google auch nicht das passende finden kann.

Besten Dank im Voraus.
 

Myhar

Hat es drauf

getElementsByClassName hat automatisch eine Range, es selektiert dir ALLE Elemente mit der Klasse. Mit [0] legst du fest, dass du nur ein spezielles haben willst, nämlich das an der Position (0 = 1. Position)

Entfernst du nun [0] dann funktioniert das nicht mehr, da du ein Array von Elementen übergibst.
Einen einfachen "fix" dafür gibt es nicht, da musst du die Funktionen anders aufbauen. Anders formuliert: Dein Code ist von Anfang an so aufgebaut, dass er nur für ein Modal funktionieren kann. Möchtest du mehrere haben, dann musst du auch eine relation von Button zu Modal herstellen. Es muss in jedem Funktionsaufruf ermittelt werden, welches Modal zu welchem Button gehört. In deinem jetzigen Code wird einfach das erste Modal aufgerufen.

Warum verwendest du dafür nicht eine fertige Javascript Library? Bie bootstrap zb ist schon etwas fertig dabei https://getbootstrap.com/docs/4.0/components/modal/ (in v3 auch) https://getbootstrap.com/docs/3.3/javascript/#modals

Falls bootstrap nicht verwendet wird: http://lokeshdhakar.com/projects/lightbox2/ (oder einfach nach javascript lightbox suchen)
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.611
Beiträge
1.538.341
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben