Erledigt - [JS] Modalboxen über Klassen ansprechen.

[dn3d_fanboy]

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]

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)

 

[dn3d_fanboy]

Vielen Dank für deine Antwort.
Ich dachte mir schon, dass das ohne weiteres nicht möglich sein wird.

Ich habe auch schon ein jQuery-Plugin gefunden, das genau meinen Vorstellungen entspricht:
https://sorgalla.com/lity/