Von Funktion gezeigtes Bootstrap 5 Modal kann nicht gescrollt werden

activivan

Neues Mitglied
Hallo zusammen,

ich habe ein Projekt, das Bootstrap 5 benutzt. Dabei taucht bei mir bei der Benutzung von Modals ein Problem auf. In meinem Projekt füllt eine JavaScript Funktion, um ein Modal anzuzeigen, ein div mit dem HTML des anzuzeigenden Modals. Danach wird dieses Modal mit der in den Bootstrap Docs vorgeschlagenen Funktion new bootstrap.Modal(document.getElementById(id)).show(); angezeigt. Dies funktioniert auch soweit gut, jedoch werden bei mir auch Modals von einem Button, der sich in einem bereits offenen Modal befindet, ebenfalls mit dieser Funktion erzeugt und angezeigt. Um das bereits offene Modal zu schließen, hat dieser Button ein Bootstrap data-bs-dismiss="modal" Attribut, was auch funktioniert. Das neue Modal wird auch angezeigt, doch hier taucht das Problem auf: Das zweite Modal kann nicht gescrollt werden! Ich habe versucht, den Grund dafür herauszufinden, und habe herausgefunden, dass Modals nur gescrollt werden können, wenn der body tag die modal-open class von Bootstrap hat. Bei dem ersten Modal, wird diese auch automatisch hinzugefügt und wenn es geschlossen wird entfernt, jedoch nicht beim zweiten!

Das hier ist ein JSFiddle Beispiel: https://jsfiddle.net/activivan/5yxv84bo/22/

Ich hoffe, irgendjemand kann mir bei der Lösung dieses Problems helfen!

Viele Grüße
activivan
 

Rushh0ur

Neues Mitglied
Das Problem ist, dass wenn du ein vermeintlich neues modale Fenster anzeigst zwei Dinge passieren:
- Das zweite Fenster wird generiert und die modal-open Klasse wird an body angefügt. Danach startet die Fade-In Animation.
- Das erste Fenster startet die Fade-Out Animation und wenn es damit fertig ist wird die modal-open Klasse vom body entfernt.

Entsprechend wird die zu Letzt ausgeführte Zuweisung beibehalten.

Hier gibt es ein paar Lösungsansätze: https://stackoverflow.com/questions/28077066/bootstrap-modal-issue-scrolling-gets-disabled

Entweder per CSS overflow-y überschreiben:
CSS:
.modal {
    overflow-y: auto !important;
}
Oder mit Hilfe von jQuerry im shown.bs.modal Event die Klasse nochmal hinzuzufügen:
Javascript:
$('body').on('shown.bs.modal', function () {
    if ($('.modal.show').length > 0) {
        $('body').addClass('modal-open');
    }
});
Beide Methoden haben vermutlich ihre Vor- und Nachteile.
 
Zuletzt bearbeitet:

activivan

Neues Mitglied
Da Rushh0ur´s Lösungsvorschlag jQuery benötigt, habe ich diesen in vanilla JavaScript nachgeschrieben (vielleicht ist das dem ein oder anderen lieber):

Javascript:
const body = document.getElementById('body');

body.addEventListener('shown.bs.modal', function () {
    body.classList.add('modal-open');
});
Zum Funtkionieren wird vorausgesetzt, dass der HTML body tag die id="body" aufweist
 
Oben Unten