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?
94
Antworten:
Dies ist eine Funktion, Klasse
modal-open
wird 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
Sie können dies überschreiben, indem Sie angeben
in deiner eigenen CSS.
quelle
<style></style>
InnerestemplateUrl
einbinden, damit es anderen Modals in der App nicht zugefügt wird.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:
quelle
ich benutzte
In diesem Fall vermeiden Sie die Anzeige der horizontalen Bildlaufleiste
quelle
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.
Kompatibel mit IE-Browsern: IE-Browser machen standardmäßig dasselbe.
quelle
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
Ich habe eine Lösung mit jquery gefunden, falls jemand anderes das gleiche Problem hat und die oben genannten Vorschläge nicht funktionieren -
quelle
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.Ich habe gerade mit dieser 'Funktion' von Bootstrap-Modalen gespielt. Scheint die
.modal
Klasse hatoverflow-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
Dann handhaben
.modal-open
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:sticky
Elementen zu tun haben, die ich hinzugefügt habe?quelle
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.
nur umgekehrt ...
quelle
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).
quelle
Das Bootstrap-Modal fügt beim Öffnen eine Auffüllung hinzu, damit Sie diesen Code in Ihrem eigenen CSS ausprobieren können
quelle
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
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.
quelle
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 ...
... dazu ...
quelle