Bootstraps modal
fügen die Klasse automatisch modal-open
zum Body hinzu, wenn ein modaler Dialog angezeigt wird, und entfernen sie, wenn der Dialog ausgeblendet ist. Sie können Ihrem CSS daher Folgendes hinzufügen:
body.modal-open {
overflow: hidden;
}
Sie könnten argumentieren, dass der obige Code zur Bootstrap-CSS-Codebasis gehört, aber dies ist eine einfache Lösung, um ihn Ihrer Site hinzuzufügen.
Update 8. Februar 2013
Dies funktioniert jetzt nicht mehr in Twitter Bootstrap v. 2.3.0 - die modal-open
Klasse wird nicht mehr zum Body hinzugefügt .
Eine Problemumgehung besteht darin, die Klasse dem Body hinzuzufügen, wenn das Modal angezeigt werden soll, und sie zu entfernen, wenn das Modal geschlossen wird:
$("#myModal").on("show", function () {
$("body").addClass("modal-open");
}).on("hidden", function () {
$("body").removeClass("modal-open")
});
Update 11. März 2013 Es
sieht so aus, als würde die modal-open
Klasse in Bootstrap 3.0 zurückkehren, explizit um das Scrollen zu verhindern:
Führt .modal-open am Körper wieder ein (damit wir die Schriftrolle dort nuklearisieren können)
Siehe hierzu: https://github.com/twitter/bootstrap/pull/6342 - siehe Abschnitt Modal .
modal-open
wird in Bootstrap 3 zurückgegeben. Wenn das gestartet wird, sollte es sicher sein, den obigen Code zu entfernen.Die akzeptierte Antwort funktioniert auf Mobilgeräten nicht (zumindest iOS 7 mit Safari 7) und ich möchte nicht, dass MOAR JavaScript auf meiner Website ausgeführt wird, wenn CSS dies tut.
Dieses CSS verhindert, dass die Hintergrundseite unter dem Modal gescrollt wird:
Es hat jedoch auch einen leichten Nebeneffekt, wenn im Wesentlichen nach oben gescrollt wird.
position:absolute
behebt dieses Problem, führt jedoch die Möglichkeit zum Scrollen auf Mobilgeräten wieder ein.Wenn Sie Ihr Ansichtsfenster kennen ( mein Plugin zum Hinzufügen des Ansichtsfensters zum
<body>
), können Sie einfach einen CSS-Schalter für das hinzufügenposition
.Ich füge dies auch hinzu, um zu verhindern, dass die zugrunde liegende Seite beim Ein- / Ausblenden von Modalen nach links / rechts springt.
Diese Antwort ist ein X-Post.
quelle
position: fixed
am Körper nicht funktionieren .Verstecken Sie einfach den Körperüberlauf und der Körper rollt nicht. Wenn Sie das Modal ausblenden, setzen Sie es auf automatisch zurück.
Hier ist der Code:
quelle
Sie können versuchen, die Körpergröße auf die Fenstergröße mit Überlauf einzustellen: Wird ausgeblendet, wenn Modal geöffnet ist
quelle
Sie müssen über die Antwort von @ charlietfl hinausgehen und Bildlaufleisten berücksichtigen, da sonst möglicherweise ein Dokument-Reflow angezeigt wird.
Öffnen des Modals:
body
Breitebody
Überlaufhidden
Stellen Sie die Körperbreite explizit auf den Wert in Schritt 1 ein.
Modal schließen:
body
Überlaufauto
Stellen Sie die
body
Breite auf einauto
Inspiriert von: http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php
quelle
$body.css("overflow", "auto");
im letzten Schritt sein :)Warnung: Die folgende Option ist für Bootstrap v3.0.x nicht relevant, da das Scrollen in diesen Versionen explizit auf das Modal selbst beschränkt war. Wenn Sie Radereignisse deaktivieren, können Sie versehentlich verhindern, dass einige Benutzer den Inhalt in Modalen anzeigen, deren Höhe größer als die Höhe des Ansichtsfensters ist.
Noch eine Option: Radereignisse
Das Bildlaufereignis kann nicht abgebrochen werden. Es ist jedoch möglich, das Mausrad und das Rad zu entfernen Ereignisse. Die große Einschränkung ist, dass nicht alle älteren Browser sie unterstützen. Mozilla hat erst kürzlich in Gecko 17.0 Unterstützung für letztere hinzugefügt. Ich kenne die vollständige Verbreitung nicht, aber IE6 + und Chrome unterstützen sie.
So nutzen Sie sie:
JSFiddle
quelle
overflow:hidden
besser.quelle
In Chrome konnte es nicht funktionieren, wenn nur CSS geändert wurde, da ich nicht wollte, dass die Seite wieder nach oben rollt. Das hat gut funktioniert:
quelle
Probier diese:
es hat bei mir funktioniert. (unterstützt IE8)
quelle
position: fixed
.Hoffe das hilft...
quelle
Das Hinzufügen der Klasse 'is-modal-open' oder das Ändern des Stils des Body-Tags mit Javascript ist in Ordnung und funktioniert wie vorgesehen. Das Problem, dem wir uns stellen müssen, ist, wenn der Körper überläuft: Versteckt springt er nach oben (scrollTop wird 0). Dies wird später zu einem Usability-Problem.
Als Lösung für dieses Problem, anstatt den Überlauf von Body-Tags zu ändern: Versteckte Änderung auf HTML-Tag
quelle
Ich bin mir bei diesem Code nicht sicher, aber es ist einen Versuch wert.
In jQuery:
Wie ich bereits sagte, bin ich mir nicht 100% sicher, aber versuche es trotzdem.
quelle
Ab November 2017 hat Chrome eine neue CSS-Eigenschaft eingeführt
overscroll-behavior: contain;
Dies löst dieses Problem, obwohl es zum Zeitpunkt des Schreibens nur eine eingeschränkte browserübergreifende Unterstützung gibt.
Weitere Informationen und Browserunterstützung finden Sie unter den folgenden Links
quelle
Die beste Lösung ist die reine CSS-
body{overflow:hidden}
Lösung, die von den meisten dieser Antworten verwendet wird. Einige Antworten bieten eine Korrektur, die auch den "Sprung" verhindert, der durch die verschwindende Bildlaufleiste verursacht wird. Keiner war jedoch zu elegant. Also habe ich diese beiden Funktionen geschrieben und sie scheinen ziemlich gut zu funktionieren.Schauen Sie sich diese jsFiddle an, um zu sehen, wie sie verwendet wird.
quelle
open modal
Schaltflächen. Chrome am 8Viele schlagen "Überlauf: versteckt" am Körper vor, was nicht funktioniert (zumindest in meinem Fall nicht), da dadurch die Website nach oben scrollen kann.
Dies ist die Lösung, die für mich (sowohl auf Mobiltelefonen als auch auf Computern) mit jQuery funktioniert:
Dadurch funktioniert das Scrollen des Modals und die Website kann nicht gleichzeitig scrollen.
quelle
Sie könnten die folgende Logik verwenden, ich habe es getestet und es funktioniert (sogar im IE)
quelle
Ich bin nicht 100% sicher, dass dies mit Bootstrap funktioniert, aber einen Versuch wert - es hat mit Remodal.js funktioniert, das auf github zu finden ist: http://vodkabears.github.io/remodal/ und es wäre für die Methoden sinnvoll ziemlich ähnlich sein.
Um zu verhindern, dass die Seite nach oben springt, und um zu verhindern, dass der Inhalt nach rechts verschoben wird, fügen Sie beim Auslösen des Modals eine Klasse hinzu
body
und legen Sie die folgenden CSS-Regeln fest:Es ist das
position:static
und dasheight:auto
, die zusammen das Springen von Inhalten nach rechts stoppen. Das verhindert, dassoverflow-y:hidden;
die Seite hinter dem Modal gescrollt werden kann.quelle
Basierend auf dieser Geige: http://jsfiddle.net/dh834zgw/1/
Das folgende Snippet (mit jquery) deaktiviert den Fensterlauf:
Und in Ihrem CSS:
Vergessen Sie beim Entfernen des Modals nicht, die Noscroll-Klasse im HTML-Tag zu entfernen:
quelle
overflow
nicht eingestellt seinhidden
? +1 obwohl das bei mir funktioniert hat (mithidden
).Ich hatte eine Seitenleiste, die durch Checkbox-Hack generiert wurde. Die Hauptidee ist jedoch, das Dokument scrollTop zu speichern und es während des Bildlaufs im Fenster nicht zu ändern.
Ich mochte das Springen der Seite einfach nicht, wenn der Körper "Überlauf: versteckt" wird.
quelle
Leider hat keine der obigen Antworten meine Probleme behoben.
In meiner Situation hat die Webseite ursprünglich eine Bildlaufleiste. Immer wenn ich auf das Modal klicke, verschwindet die Bildlaufleiste nicht und die Kopfzeile bewegt sich etwas nach rechts.
Dann habe ich versucht hinzuzufügen
.modal-open{overflow:auto;}
(was die meisten Leute empfohlen haben). Es hat tatsächlich die Probleme behoben: Die Bildlaufleiste wird angezeigt, nachdem ich das Modal geöffnet habe. Ein weiterer Nebeneffekt ist jedoch, dass "der Hintergrund unter dem Header zusammen mit einem weiteren langen Balken hinter dem Modal etwas nach links verschoben wird".Zum Glück ist, nachdem ich hinzugefügt habe
{padding-right: 0 !important;}
, alles perfekt repariert. Sowohl der Header- als auch der Body-Hintergrund haben sich nicht bewegt, und das Modal behält weiterhin die Bildlaufleiste bei.Hoffe, dies kann denen helfen, die immer noch mit diesem Problem stecken. Viel Glück!
quelle
Die meisten Stücke sind hier, aber ich sehe keine Antwort, die alles zusammenfügt.
Das Problem ist dreifach.
(1) Verhindern Sie das Scrollen der zugrunde liegenden Seite
(2) und entfernen Sie die Bildlaufleiste
(3) Aufräumen, wenn das Modal entlassen wird
Wenn das Modal nicht im Vollbildmodus angezeigt wird, wenden Sie die .modal-Bindungen auf eine Vollbild-Überlagerung an.
quelle
Meine Lösung für Bootstrap 3:
denn für mich hat der einzige
overflow: hidden
in derbody.modal-open
Klasse nicht verhindert, dass sich die Seite aufgrund des Originals nach links verschiebtmargin-right: 15px
.quelle
Ich habe es einfach so gemacht ...
Aber als der Scroller verschwand, bewegte er alles richtig 20px, also fügte ich hinzu
gleich danach.
Funktioniert bei mir.
quelle
Wenn Modal 100% Höhe / Breite sind, funktioniert "mouseenter / Leave", um das Scrollen einfach zu aktivieren / deaktivieren. Das hat für mich wirklich geklappt:
quelle
arbeitete für mich
quelle
Warum nicht so wie Bulma? Wenn modal aktiv ist, fügen Sie zu HTML ihre Klasse .is-clipped hinzu, die überläuft: versteckt! Wichtig; Und das ist es.
Edit: Okey, Bulma hat diesen Fehler, also musst du auch andere Dinge wie hinzufügen
quelle
Da dieses Problem für mich hauptsächlich unter iOS auftritt, stelle ich den Code zur Verfügung, um dies nur unter iOS zu beheben:
quelle
Keine der oben genannten Antworten hat bei mir perfekt funktioniert. Also habe ich einen anderen Weg gefunden, der gut funktioniert.
Fügen Sie einfach einen
scroll.(namespace)
Listener hinzu und setzen SiescrollTop
dendocument
auf den neuesten Wert es ist ...und entfernen Sie auch den Listener in Ihrem Close-Skript.
aktualisieren
Anscheinend funktioniert dies auf Chrom nicht gut. Irgendwelche Vorschläge, um das Problem zu beheben?
quelle
Das hat bei mir funktioniert:
quelle
Für diejenigen, die sich fragen, wie sie das Scroll-Ereignis für das Bootstrap 3-Modal erhalten können:
quelle