it-swarm.com.de

bootstrap-Modal entfernt die Bildlaufleiste

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

69
El Dude

Dies ist eine Funktion, die von der Klasse modal-open beim Anzeigen des Modals zum HTML body hinzugefügt und beim Ausblenden entfernt wird.

Dadurch verschwindet die Bildlaufleiste seit der Bootstrap-Datei

.modal-open {
    overflow: hidden;
}

Sie können dies durch Angabe überschreiben

.modal-open {
    overflow: scroll;
}

in deine eigenen css.

93
flup

Ich benutzte

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

In diesem Fall vermeiden Sie die Anzeige der horizontalen Bildlaufleiste

25
Mauro

Ich denke, erben ist besser als scrollen , denn wenn Sie modal öffnen, wird es immer mit scroll geöffnet. Also mache ich das einfach:

.modal-open {
  overflow: inherit;
}
22

Es ist besser, overflow-y zu verwenden: Scrollen und entfernen Sie die Polsterung vom Hauptteil. Bootstrap-Modal hinzugefügt den Hauptteil der Seite.

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

IE-Browser Kompatibel: IE Browser führt standardmäßig dasselbe aus.

9
Super Model

Gott sei Dank kam ich über diesen Beitrag! Ich zog meine Haare heraus und versuchte herauszufinden, wie ich meine Bildlaufleisten zurückholen kann, wenn ich das Fenster mit meinem eigenen engen Link schließe. Ich habe die Vorschläge für CSS ausprobiert, aber es funktionierte nicht richtig. Nach dem Lesen 

class modal-open wird dem HTML-Body hinzugefügt, wenn Sie das Modal .__ anzeigen. und entfernt, wenn Sie es ausblenden. - @flup

Ich habe eine Lösung mit Jquery gefunden, daher hat jeder andere das gleiche Problem und die obigen Vorschläge funktionieren nicht.

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

Ich habe gerade mit diesem 'Feature' von Bootstrap-Modalen gespielt. _ Die Klasse .modal hat overflow-y:auto; Der Modal-Wrapper erhält also seine eigene Bildlaufleiste, wenn der Modal selbst zu hoch wird.

Wenn Sie immer eine Bildlaufleiste wünschen (Designer tun dies häufig), __ Legen Sie zuerst den Hauptteil fest

body {
    overflow-y:scroll;
}

Dann mit .modal-open umgehen

.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 */
}

Lass die Scrollbar am Körper in diesem Fall unberührt

Alle anderen Antworten auf dieser Seite ließen meinen Inhalt immer weiter ansteigen.

Kopf hoch!

Obwohl diese Lösung immer gut für mich funktionierte, hatte ich gestern ein Problem mit diesem Fix, wenn der Modal schleppbar und zu groß für den Bildschirm (vertikal) ist. Hat es etwas mit position:sticky Elementen zu tun, die ich hinzugefügt habe?

3
Brainfeeder

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

Ändern Sie die css-Datei von bootstrap nicht, da sich dadurch alles in Ihrem Bootstrap ändert, wenn Sie es in anderen Teilen Ihrer Seite verwenden. 

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

Um es nicht zu verbergen, wenn Modal geöffnet ist, überschreiben Sie es einfach, indem Sie den CSS-Code (unten) in Ihre eigene CSS-Datei einfügen.

.modal-open {
    overflow: scroll;
}

nur ein umgekehrt ...

.modal-open {
    overflow: hidden;
}
1

das Bootstrap-Modal fügt nach dem Öffnen eine Auffüllung hinzu, damit Sie diesen Code in Ihrer eigenen CSS ausprobieren können

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

Wenn das modale Popup mit dem Inhalt in einem Bildlauf angezeigt werden muss und das übergeordnete Element weiterhin stehen muss, fügen Sie der Custom.css Folgendes hinzu (überschreibt css)

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