Auf Thema antworten

Beitrag

[QUOTE="Sempervivum, post: 14990, member: 3917"]
Guten Abend [USER=5290]@fleckia[/USER]
Inzwischen gibt es eine bessere Möglichkeit, Modale zu erzeugen: Das dialog-Element:
[URL]https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog[/URL]
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>
[/CODE]
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();
            }
        });

[/CODE]
[/QUOTE]

Authentifizierung