Bootstrap Modal entfernt die Bildlaufleiste

94

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?

El Dude
quelle
1
Browser - kompatibel Antwort: stackoverflow.com/a/47807685/7186739
Super Model

Antworten:

114

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.

flup
quelle
Kannst du bitte genauer sein?
El Dude
1
Weitere Details hinzugefügt. Besser jetzt?
Flup
14
Es ist besser, overflow-y: scroll zu verwenden, was meiner Meinung nach die Absicht der OP-Frage besser anspricht. Überlauf verwenden: Scrollen fügt am unteren Bildschirmrand eine horizontale Bildlaufleiste hinzu.
Scott
1
Perfekt, funktioniert auch mit Modularen mit eckigen Riemen, kann einfach das oben genannte CSS in ein <style></style>Inneres templateUrleinbinden, damit es anderen Modals in der App nicht zugefügt wird.
Davidkonrad
2
Überlauf verwenden: erben; stattdessen. Auf diese Weise entfernt das Modal keine Schriftrolle, wenn Sie eine Schriftrolle haben, und fügt keine Schriftrolle hinzu, wenn Sie keine haben
Alisson Alvarenga
31

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;
}
Alisson Alvarenga
quelle
Das ist die wahre Antwort. Überlauf-Scroll wirkt sich in meinem Fall immer noch auf ein Element aus.
Coisox
26

ich benutzte

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

In diesem Fall vermeiden Sie die Anzeige der horizontalen Bildlaufleiste

Mauro
quelle
wir könnten es mit der Antwort von @Alisson Alvarenga kombinieren und overflow-y verwenden: erben;
Duodvk
23

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.

Supermodel
quelle
1
Vielen Dank. Wenn das modale Popup gescrollt werden muss und das übergeordnete Element still bleiben muss .modal-body {max-height: calc (100vh - 210px); Überlauf-y: auto; } .modal-open {Überlauf: versteckt; Überlauf-y: scrollen; Polsterung rechts: 0! wichtig; }
Oracular Man
9

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>
Reich
quelle
Ich hatte ein Problem, bei dem ich das Ereignis hide.bs.modal überschrieb, damit ich benutzerdefinierten Code ausführen konnte, wenn das Modal ausgeblendet war. Was ich jedoch nicht erkannte, war, dass die modal-open-Klasse nicht mehr aus dem Body entfernt werden konnte. Daher kam meine Bildlaufleiste beim Schließen dieses bestimmten Modals nicht zurück. Ich entferne die modal-open-Klasse nicht manuell in meinem hide.bs.modal-Code und es behebt dieses Problem.
Jim
1
Sie sollten data-dismiss="modal"Ihrem Link nur ein Attribut hinzufügen müssen, anstatt solche benutzerdefinierten Aktionen auszuführen. Bootstrap führt alle entsprechenden Schließaktionen aus, wenn auf diesen Link geklickt wird.
Nollidge
1
data-entlassen = "modal" funktioniert in meinem Fall nicht, weil ich eine Funktion in der Winkelsteuerung aufrufe. Die vorgeschlagene jQuery-Lösung funktioniert für mich sehr gut.
Gianni
5

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?

Brainfeeder
quelle
Als ich body {overflow-y: scroll;} hinzugefügt habe, war mein Problem gelöst. Danke mein Herr.
FrenkyB
1

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;
}
NormanCabilatazan
quelle
3
Dies scheint die gleichen Informationen zu enthalten wie die andere Antwort auf diese Frage. Wenn Ihre Antwort anders ist, bearbeiten Sie sie, um zu klären, was genau anders ist. Bitte fügen Sie nur dann eine neue Antwort hinzu, wenn Sie etwas Neues haben.
Jeffrey Bosboom
1
Es enthält dieselbe Antwort, kann aber auf andere Weise erklärt werden. Manchmal hängt das Verständnis davon ab, wie es erklärt wird.
NormanCabilatazan
1
Nicht alle Leser konnten die gleiche Idee bekommen. Es ist besser, es anders zu erklären, damit sie es klar verstehen.
NormanCabilatazan
1

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;
}
Oracular Man
quelle
0

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;
}
mehdigriche
quelle
0

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.

user1508136
quelle
0

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>
Matt
quelle