Bootstrap Modal entfernt die Bildlaufleiste

Wenn ich eine modale Ansicht auf meiner Seite auslöse, wird die Bildlaufleiste ausgeblendet. Dies ist ein ärgerlicher Effekt, da sich die Hintergrundseite bewegt, wenn sich das Modal bewegt / verschwindet. Gibt es ein Heilmittel für diesen Effekt?

Dies ist eine Funktion, Klasse modal-openwird dem HTML hinzugefügtbody wenn Sie das Modal anzeigen, und entfernt, wenn Sie es ausblenden.

Dadurch verschwindet die Bildlaufleiste, da in der Bootstrap-CSS angegeben ist

.modal-open {
    overflow: hidden;
}

Sie können dies überschreiben, indem Sie angeben

.modal-open {
    overflow: scroll;
}

in deiner eigenen CSS.

Ich denke, dass Erben besser ist als Scrollen, denn wenn Sie Modal öffnen, wird es immer mit Scrollen geöffnet, aber wenn Sie keine Schriftrollen haben, werden Sie das gleiche Problem bekommen. Also mache ich einfach Folgendes:

.modal-open {
  overflow: inherit;
}

ich benutzte

.modal-open {
  overflow-y: scroll;
}

In diesem Fall vermeiden Sie die Anzeige der horizontalen Bildlaufleiste

Es ist besser, overflow-y zu verwenden: Scrollen und Entfernen der Polsterung vom Körper, Bootstrap-Modal fügt dem Seitenkörper eine Polsterung hinzu.

.modal-open {
  overflow:hidden;
  overflow-y:scroll;
  padding-right:0 !important;
}

Kompatibel mit IE-Browsern: IE-Browser machen standardmäßig dasselbe.

Gott sei Dank bin ich auf diesen Beitrag gestoßen! Ich zog mir die Haare aus und versuchte herauszufinden, wie ich meine Bildlaufleisten zurückbekomme, wenn ich das Fenster mit meinem eigenen Link zum Schließen schließe. Ich habe die Vorschläge für CSS ausprobiert, aber es hat einfach nicht richtig funktioniert. Nach dem Lesen

Die Klasse modal-open wird dem HTML-Text hinzugefügt, wenn Sie das Modal anzeigen, und entfernt, wenn Sie es ausblenden. - @flup

Ich habe eine Lösung mit jquery gefunden, falls jemand anderes das gleiche Problem hat und die oben genannten Vorschläge nicht funktionieren -

<script>
            jQuery(document).ready(function () {
jQuery('.closeit').click(function () {
 jQuery('body').removeClass('modal-open');
                });
            });
        </script>

Ich habe gerade mit dieser 'Funktion' von Bootstrap-Modalen gespielt. Scheint die .modalKlasse hat overflow-y:auto;Also bekommt der Modal Wrapper seine eigene Bildlaufleiste, wenn das Modal selbst zu hoch wird.

Wenn Sie immer eine Bildlaufleiste wünschen (Designer tun dies häufig), legen Sie zuerst den Körper fest

body {
    overflow-y:scroll;
}

Dann handhaben .modal-open

.modal-open .modal {
    overflow-y:scroll; /* Force a navbar on .modal */
}

.modal-open .topnavbar-wrapper {
    padding-right:17px; /* Noticed that right aligned navbar content got overlapped by the .modal scrollbar */
}

Lassen Sie die Deaktivierung der Bildlaufleiste am Körper in diesem Fall unberührt

Alle anderen Antworten auf dieser Seite ließen meinen Inhalt immer wieder springen.

Kopf hoch!

Obwohl diese Lösung die ganze Zeit für mich funktioniert hat, hatte ich gestern ein Problem mit diesem Fix, wenn das Modal ziehbar und zu groß ist, um auf den Bildschirm zu passen (vertikal). Es könnte etwas mit position:stickyElementen zu tun haben, die ich hinzugefügt habe?

Besser, wenn Sie Ihre eigene CSS-Datei erstellen, um einen bestimmten Teil Ihres Bootsrap anzupassen.

Ändern Sie die CSS-Datei von Bootstrap nicht, da dadurch alles in Ihrem Bootstrap geändert wird, sobald Sie es in anderen Teilen Ihrer Seite verwenden.

Wenn Ihre Seite etwas lang ist, wird automatisch eine Bildlaufleiste angezeigt. Und wenn das Modal geöffnet wird, wird die Bildlaufleiste ausgeblendet, da Bootstrap dies standardmäßig tut.

Um zu vermeiden, dass es beim Öffnen von Modal ausgeblendet wird, überschreiben Sie es einfach, indem Sie den CSS-Code (unten) in Ihre eigene CSS-Datei einfügen.

.modal-open {
    overflow: scroll;
}

nur umgekehrt ...

.modal-open {
    overflow: hidden;
}

Wenn das modale Popup mit dem Inhalt im Inneren scrollen muss und das übergeordnete Popup still bleiben muss, fügen Sie Ihrer Custom.css Folgendes hinzu (überschreibende CSS).

.modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}
.modal-open {
    overflow: hidden;
    overflow-y: scroll;
    padding-right: 0 !important;
}

Das Bootstrap-Modal fügt beim Öffnen eine Auffüllung hinzu, damit Sie diesen Code in Ihrem eigenen CSS ausprobieren können

.modal-open {
    padding: 0 !important;
}

Dies wird wahrscheinlich dadurch verursacht, dass das erste Modal (wenn es geschlossen ist) die Modal-Open-Klasse aus dem Body-Element entfernt und das zweite Modal es nicht wieder hinzufügt, wenn das Modal-Open ausgelöst wird.

In diesem Fall würde ich event verwenden, um zu überprüfen, ob Modal vollständig geschlossen / ausgeblendet wurde, und um ein anderes zu öffnen

let modal1 = $('.modal1);
let modal2 = $('.modal2);
$modal1.on('hidden.bs.modal', function (e) {
   $modal2.modal('show');
});

Dies wird warten, bis das 1. Modal geschlossen ist, um sicherzustellen, dass das Modal-Open aus dem Körper entfernt und beim Öffnen wieder hinzugefügt wird.

Ich hatte dieses Problem gerade selbst und das schnelle Finden dieser Frage half mir zu verstehen, was das Verhalten verursachte. So danke.

Ich finde diese CSS-Problemumgehungen jedoch etwas unelegant. Es sei denn, Sie möchten die Bildlaufleisten speziell beibehalten (obwohl mir kein Grund dafür einfällt).

Im Wesentlichen wendet Bootstrap bestimmte Elemente mit einem Auffüllrecht an, um das Entfernen der Bildlaufleiste zu kompensieren.

Alles, was Sie tun müssen, ist, einen zusätzlichen Wrapper ohne Auffüllung direkt um Ihr problematisches Element zu legen (und die Klasse, auf die abgezielt wird, darauf zu verschieben).

dh ändern von diesem ...

<div class="fixed-top p-1 bg-dark">
    ...this content will move as padding will be modified...
</div>

... dazu ...

<div class="fixed-top p-0 bg-dark">
    <div class="p-1">
        ...this content won't move...
    </div>
</div>