Guten Abend
@fleckia
Inzwischen gibt es eine bessere Möglichkeit, Modale zu erzeugen: Das dialog-Element:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
Aber auch dort muss man die Beispiele für mehrere Modale erweitern: Gib jedem dialog-Element eine ID und dem Button ein data-Attribut mit dieser ID
Code:
<dialog id="modal1">
<button class="close-dialog" autofocus>Close</button>
<p>This modal dialog has a groovy backdrop!</p>
</dialog>
<button class="open-dialog" data-id-dialog="modal1">Modal 1 öffnen</button>
Die ID kannst Du dann aus dem data-Attribut auslesen und das Modal öffnen.
Auch das Schließen über den close-Button muss universell gestaltet werden: Über die Funktion "closest" kannst du, vom Button ausgehend, das dialog-Element ermitteln.
Das Javascript müsste dann so aussehen:
Code:
// Eventlistener für Klick registrieren:
document.addEventListener('click', event => {
// event.target ist das Element das geklickt wurde.
// Wurde ein Button für das Öffnen eines Dialoges geklickt?
if (event.target.classList.contains('open-dialog')) {
const
// ID des dialog-Elementes aus dem data-Attribut lesen:
dialogID = event.target.dataset.idDialog,
// dialog-Element bereit stellen:
dialog = document.getElementById(dialogID);
// ... und als Modal öffnen:
dialog.showModal();
}
// Wurde ein Button für das Schließen eines Dialoges gedrückt?
if (event.target.classList.contains('close-dialog')) {
const
// dialog-Element bereit stellen:
dialog = event.target.closest('dialog');
// ... und schließen
dialog.close();
}
});
