Das Bootstrap 3-Modal wird ausgelöst und bewirkt, dass die Seite vorübergehend nach links verschoben wird / Probleme mit der Browser-Bildlaufleiste auftreten

78

Ich arbeite an einer Site mit Bootstrap 3.1.0.

Sie werden feststellen, dass beim Öffnen des modalen Fensters die Browser-Bildlaufleiste nur für den Bruchteil einer Sekunde verschwindet und dann wieder angezeigt wird. Das Gleiche gilt, wenn Sie es schließen.

Wie kann ich es so gestalten, dass es ohne Interaktion mit der Browser-Bildlaufleiste geöffnet und geschlossen wird? Ich habe Beiträge auf dem Stapel gesehen, in denen Leute Probleme hatten, aber ich kann keine spezifische Antwort auf mein Problem finden. Wenn also jemand anderes diese Anfrage gestellt hat und jemand davon weiß und mich damit verknüpfen möchte, würde ich mich freuen es. Ich habe ungefähr 2 Stunden danach gesucht, bevor ich etwas gepostet habe.

html twitter-bootstrap responsive-design twitter-bootstrap-3 Daniel White
quelle
Anscheinend wurde dieses Problem in Version 3.2.0 von Bootstrap behoben.
Devius
3
Anscheinend nicht (2016). Zukünftige Leser sollten die Antworten nach Stimmen sortieren, da die akzeptierte Antwort nicht die beste Antwort ist. Siehe diese Antwort und möglicherweise auch diese
cssyphus
Immer noch nicht behoben 3.3.6, also danke für die Heads-Ups @ Gibberish!
Arjs
Funktioniert gut im Jahr 2017.
Lowtechsun

Antworten:

22

Das habe ich in Github gefunden, als ich nach diesem Problem gesucht habe und für mich funktioniert es gut

js:

    $(document).ready(function () {
    $('.modal').on('show.bs.modal', function () {
        if ($(document).height() > $(window).height()) {
            // no-scroll
            $('body').addClass("modal-open-noscroll");
        }
        else {
            $('body').removeClass("modal-open-noscroll");
        }
    });
    $('.modal').on('hide.bs.modal', function () {
        $('body').removeClass("modal-open-noscroll");
    });
})

CSS Verwenden Sie dieses CSS, wenn Sie Nav-Fixed-Top und Navbar-Fixed-Bottom haben :

body.modal-open-noscroll
{
    margin-right: 0!important;
    overflow: hidden;
}
.modal-open-noscroll .navbar-fixed-top, .modal-open .navbar-fixed-bottom
{
    margin-right: 0!important;
}

oder verwenden Sie dieses CSS, wenn Sie Navbar-Standard haben

body.modal-open-noscroll 
{
  margin-right: 0!important;
  overflow: hidden;
}
.modal-open-noscroll .navbar-default, .modal-open .navbar-default 
{
  margin-right: 0!important;
}
user4314713
quelle
4
Arbeitete für mich, aber ich musste den Rand rechts in Polster rechts ändern
GhostRider
@ GhostRider: Danke. Ich musste den Rand zum Auffüllen riskieren.
Brian Kates
Plus eins für das Fix-Top / Fixed-Bottom-Fix, keine der anderen Antworten funktionierte für dieses Szenario.
Tino Mclaren
1
Die Antwort von @FutureReaders ben.kaminski unten enthält eine einzeilige CSS-Lösung, die als akzeptierte Antwort gelten sollte.
Cssyphus
92 
.modal {
 overflow-y: auto;
}

.modal-open {
 overflow: auto;
}

Wird es loswerden. Dies wurde hinzugefügt, damit die Modals schneller reagieren, sodass Sie nach unten scrollen und ein Modal sehen können, wenn der Bildschirm zu kurz ist. Es verhindert auch, dass der Hintergrund gescrollt werden kann, während ein Modal aktiv ist. Wenn Sie diese Funktionalität nicht benötigen, können Sie das von mir veröffentlichte CSS verwenden.

Weitere Informationen: Sie setzen .modal-open auf dem Körper, wodurch jegliches Scrollen auf dem Körper verhindert wird und die Bildlaufleiste des Körpers ausgeblendet wird. Wenn das Modal angezeigt wird, hat es den dunklen Hintergrund, der den gesamten Bildschirm einnimmt, und das hat einen Überlauf-y: scroll, wodurch die Bildlaufleiste zurückgesetzt wird. Wenn das erweiterte Modal den unteren Bildschirmrand passiert, können Sie trotzdem den Bildlauf fortsetzen dunkler Hintergrund und sehen den Rest davon.

cjd82187
quelle
11
Möglicherweise möchten Sie dieses CSS nur für den Desktop in eine Medienabfrage aufnehmen, damit Sie das bessere Boostrap 3-Design haben, wenn Sie mobil sind.
cjd82187
1
Die Seite verschiebt sich jetzt nicht nach links, aber jetzt haben wir mehr vertikale Bildlaufleisten !!!.
Laxman
1
Funktioniert, fügt aber eine zweite Bildlaufleiste hinzu.
Emzero
Perfekt. Schnell und einfach. Danke
coggicc
2
.modal-open { overflow: auto; padding-right: 0px !important; }Fügen Sie auch Polster hinzu , wie @ ben.kaminski sagte, wodurch das Problem der Verschiebung nach links vollständig beseitigt wird. Hoffnung hilft.
Shaijut
73

Das Problem der Verschiebung nach links kann nur mit CSS behoben werden.

.modal-open[style] {
padding-right: 0px !important;
}

Sie überschreiben nur einen Inline-Stil, der im Code vorhanden ist. Ich verwende meine in einem WordPress-Build und der Inline-Stil wurde auf den Körper angewendet. Sah so aus:

<body class="home blog logged-in modal-open" style="padding-right: 15px;">

Hoffe das hilft jemandem!

ben.kaminski
quelle
Ich hatte auch das gleiche Problem im IE. Es würde einen Polster-richtigen Stil hinzufügen. Es ist wahrscheinlich, weil ich die vertikale Bildlaufleiste erzwinge. Egal, das hat es behoben, danke!
Slopapa
Danke Ben - das hat mir auch geholfen!
DaniB
6
Dies kombiniert mit dem Überlauf: Auto Fix oben macht den Trick für mich.
DPac
2
2016 und es funktioniert (wenn Sie auch den Überlauf berücksichtigen.) Vielen Dank!
Arjs
1
Dies sollte die akzeptierte Antwort im Jahr 2020 sein. Danke!
Nick Van Brunt
39 
.modal {
    overflow-y: auto;
}

.modal-open {
    overflow: auto;
}

.modal-open[style] {
    padding-right: 0px !important;
}

Danke an ben und cjd.

Der obige Code scheint für mich zu funktionieren.

Tony S.
quelle
Ich denke, dies ist keine tatsächliche Antwort und Sie haben gepostet, weil Sie noch keinen Kommentar abgeben können. Aber bitte haben Sie etwas Geduld.
Cem Özer
Hat 2016 für mich gearbeitet! Vielen Dank
GhostRider
2017 und Bootstrap 4 ist die leichte Verschiebung NOCH da mit Modalen. Dies behebt das Problem immer noch, danke!
DaveK
Mit Bootstrap 4.2.1 ist dieses Problem immer noch vorhanden, und diese Antwort hat es behoben. Vielen Dank!
wasp8898
8

Dies ist ein gemeldetes Problem beim Booten: https://github.com/twbs/bootstrap/issues/9855

Und dies ist meine vorübergehende Schnellkorrektur und funktioniert auch mit der festen oberen Navigationsleiste, nur mit Javascript. Laden Sie dieses Skript zusammen mit Ihrer Seite.

$(document.body)
.on('show.bs.modal', function () {
    if (this.clientHeight <= window.innerHeight) {
        return;
    }
    // Get scrollbar width
    var scrollbarWidth = getScrollBarWidth()
    if (scrollbarWidth) {
        $(document.body).css('padding-right', scrollbarWidth);
        $('.navbar-fixed-top').css('padding-right', scrollbarWidth);    
    }
})
.on('hidden.bs.modal', function () {
    $(document.body).css('padding-right', 0);
    $('.navbar-fixed-top').css('padding-right', 0);
});

function getScrollBarWidth () {
    var inner = document.createElement('p');
    inner.style.width = "100%";
    inner.style.height = "200px";

    var outer = document.createElement('div');
    outer.style.position = "absolute";
    outer.style.top = "0px";
    outer.style.left = "0px";
    outer.style.visibility = "hidden";
    outer.style.width = "200px";
    outer.style.height = "150px";
    outer.style.overflow = "hidden";
    outer.appendChild (inner);

    document.body.appendChild (outer);
    var w1 = inner.offsetWidth;
    outer.style.overflow = 'scroll';
    var w2 = inner.offsetWidth;
    if (w1 == w2) w2 = outer.clientWidth;

    document.body.removeChild (outer);

    return (w1 - w2);
};

Hier ist das Arbeitsbeispiel: http://jsbin.com/oHiPIJi/64

Agni Pradharma
quelle
Funktioniert einwandfrei mit der neuesten Version von Bootstrap, die in den neuesten Versionen Chrome, Firefox und Opera getestet wurde. Habe es mir mit Safari oder IE nicht angesehen.
Lowtechsun
Genau das, was ich brauchte. Das und das: .modal { overflow: auto; } .modal-open { overflow: auto; } .modal-open[style] { padding-right: 0px !important; } Ich habe versucht, ein Modal von einem anderen abzufeuern, und die Schicht wurde verdoppelt. Danke für deinen Tipp.
Aelys
7

Wenn Sie eine feste Navigationsleiste haben und beim Öffnen von Modal nicht nach oben scrollen möchten, verwenden Sie diesen Stil

.modal-open {
    overflow: visible;
}
.modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom {
    padding-right:0px!important;
}
Calvin Grain
quelle
7

Keines der Elemente auf dieser Seite hat in Version 3.3.4 und 3.3.5 für mich funktioniert. Das Hinzufügen dieses CSS hat das Problem für mich gelöst.

body {
padding-right:0px !important;
margin-right:0px !important;
}
Schwindel
quelle
5

um das Problem zu lösen, das dazu führt, dass die Seite nach rechts verschoben wird

html, body{
  padding: 0 !important;
}
Erweitern Sie das Snippet

Femi-oke Anthony
quelle
Nun, das Snippet zeigt eigentlich nichts. Fügen Sie einige farbige Blöcke hinzu, um die Wirkung Ihrer Angaben zu zeigen.
Al.G.
DAS hat bei mir funktioniert - nicht bei den anderen overflow-y:autoAntworten.
Gen b.
Hat auch für mich gearbeitet. Die anderen Lösungen taten es nicht.
Billy Ray Valentine
4 
$('body').on('show.bs.modal', function () {
    if ($("body").innerHeight() > $(window).height()) {
        $("body").css("margin-right", "17px");
    }
}); 

$('body').on('hidden.bs.modal', function (e) {
    $("body").css("margin-right", "0px");
});

Diese kleine Korrektur simuliert die Bildlaufleiste, wenn das Modal angezeigt wird, und fügt dem Körper einen Rand rechts hinzu.

hect0r90
quelle
1
Der rechte Rand sollte keinen festen Pixelwert haben, da die Breite der Bildlaufleiste von Browser zu Browser unterschiedlich ist.
Lowtechsun
Die Breite der Bildlaufleiste ändert sich auch je nach Browser-Zoom. Sollte dieses Skript in Verbindung mit einem Skript zur Erkennung der Bildlaufleistengröße wie diesem verwenden
Kunal
4

Keine der oben genannten hat funktioniert und andere Stunden der Forschung. Aber der folgende Code funktionierte perfekt mit nur ein bisschen CSS. Das obige würde Inline-Stilpolster nicht entfernen: 17px; Mit JS oder jquery konnte ich 0 Auffüllungen hinzufügen, hatte aber keine Auswirkung.

.modal-open {
  padding-right: 0px !important;
  overflow-y: scroll;
  width: 100%;
  display: block;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  display: none;
  width: 100%;
  height: 100%;
  outline: 0;
  padding-right: 0 !important;
}
Corey B.
quelle
Dadurch erhält eine Seite mit Bildlaufleiste eine zweite Bildlaufleiste, wenn ein Modal geöffnet wird. Und wenn Sie ein zweites Modal auf einem geöffneten Modal haben, fehlt die Bildlaufleiste des ersten Modals, nachdem Sie das zweite geschlossen haben.
Lacek
3 

html, body{
    padding-right: 0px !important; 
    position: relative!important;
}
Erweitern Sie das Snippet

Versuchen Sie diesen Code wirklich, es funktioniert

Beast.nil
quelle
Obwohl dies nicht die schönste Art ist, es zu beheben, funktioniert es
Sander Van Keer
Nur um ein Problem mit einem modalen Bedürfnis zu beheben, die Stile meines Körpers anzupassen, die viele andere Dinge stören könnten, aber zum Teufel funktionierte dies für mich +1
Sayyed Abbas Rizvi
3

Diese Lösung funktioniert für mich !!!!

.modal {
 overflow-y: auto;
}

.modal-open {
 overflow: auto;
}


.modal-open[style] {
padding-right: 0px !important;
}
Jigar Bhatt
quelle
3

Ich hatte dieses Problem mit Bootstrap 4. Ich habe html { overflow-y: scroll; }und ich denke, es ist ein Problem, aber nach dem Hinzufügen .modal-open[style] { padding-right: 0px !important; }zu meiner lokalen CSS-Datei funktioniert alles perfekt!

.modal-open[style] { 
    padding-right: 0px !important; 
}
Erweitern Sie das Snippet

Seldo97
quelle
Hat perfekt für mich padding-right: 0;padding-right: 0px
funktioniert
2

In meinem Fall gibt das Body-Tag bereits an overflow:hidden.

Wenn der modale Dialog geöffnet wird, wird er auch zum Text hinzugefügt padding-right:17px;.

Mein Code hier

.modal-open {
  overflow: hidden!important;
  padding-right:0!important
}
KayJ
quelle
2

Ich habe dieses Problem behoben, indem ich diesen Code in meine CSS-Datei eingefügt habe:

body {
    padding-right: 0px !important;
}
Anurag Phadnis
quelle
Das hat bei mir funktioniert :) Danke
Steven94
1

Ab Bootstrap 3.3.2 scheint das Verhalten so zu sein, dass die Bildlaufleisten entfernt werden, wenn das Dialogfeld angezeigt wird, und Bootstrap dem Body-Element eine rechte Auffüllung hinzufügt, um den zuvor von der Bildlaufleiste belegten Platz zu kompensieren. Leider verhindert dies nicht die Bildschirmverschiebung, zumindest in modernen Versionen von Chrome, IE, Firefox oder Safari. Keine der Korrekturen hier behebt dieses Problem vollständig, aber das Kombinieren der Antworten von ben.kaminski und eines Teils der Antwort von cjd82187 behebt das Problem nur mit CSS:

/* removes inline padding added by Boostrap that makes the screen shift left */
.modal-open[style] {
    padding-right: 0px !important;
}

/* keeps Bootstrap from removing the scrollbar if it's there */
.modal-open {
    overflow: auto;
}

Wie von ben.kaminski erwähnt, wurde der Code zu Twitter Bootstrap hinzugefügt, sodass Sie einen Bildlauf durchführen können, um das Modal anzuzeigen, wenn es sich am unteren Bildschirmrand befindet. Um diese Funktionalität beizubehalten, können Sie die CSS-Lösung in eine Medienabfrage einbinden, sodass sie nur für große Ansichtsfenster gilt.

@media (min-width: 992px) {         
    .modal-open[style] {
        padding-right: 0px !important;
    }

    .modal-open {
        overflow: auto;
    }   
}
Clav
quelle
1

Implementierte diese einfache Lösung

.modal-open {

  padding-right: 0 !important;

}

html {

  overflow-y: scroll !important;

}
Harshal Lonare
quelle
1

Verwenden Sie für Bootstrap-4.3.x das folgende CSS:

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

/* if you have .navbar in your page then add padding-right for your .navbar (default is 16px) */
.modal-open .navbar {
    padding-right: 16px !important;
}

Das ist es. Es wird nichts anderes benötigt als: JavaScript-Code, um einige .classin Ihre bodyund dann CSS-Codes hinzuzufügen, um sie zu formatieren.

Partho63
quelle
0

Meine Seite benötigte eine modifizierte Version von Agni Pradharmas Code, um zu verhindern, dass er sich verschiebt, wenn das Modal angezeigt wird. Ich habe einen festen Navigationsheader und einige Seiten mit Bildlauf, andere ohne. Demo hier: http://jsbin.com/gekenakoki/1/

Ich habe beide CSS verwendet:

.modal {
    overflow-y: auto;
}

.modal-open {
    overflow: auto;
}

und das Skript:

$(document.body)
.on('show.bs.modal', function () {
    if (this.clientHeight <= window.innerHeight) {
        return;
    }
    // Get scrollbar width
    var scrollbarWidth = getScrollBarWidth();
    if (scrollbarWidth) {
        $(document.body).css('padding-left', scrollbarWidth); 
    }
})
.on('hidden.bs.modal', function () {
    $(document.body).css('padding-left', 0);
});

function getScrollBarWidth () {
    var inner = document.createElement('p');
    inner.style.width = "100%";
    inner.style.height = "200px";

    var outer = document.createElement('div');
    outer.style.position = "absolute";
    outer.style.top = "0px";
    outer.style.left = "0px";
    outer.style.visibility = "hidden";
    outer.style.width = "200px";
    outer.style.height = "150px";
    outer.style.overflow = "hidden";
    outer.appendChild (inner);

    document.body.appendChild (outer);
    var w1 = inner.offsetWidth;
    outer.style.overflow = 'scroll';
    var w2 = inner.offsetWidth;
    if (w1 == w2) w2 = outer.clientWidth;

    document.body.removeChild (outer);

    return (w1 - w2);
};
Ritter
quelle
Das funktioniert nicht. Ändern Sie die Geige, um den vertikalen Bildlauf auszulösen, und die Verschiebung wird weiterhin angezeigt.
Archimedes Trajano
0

Wenn jemand react-bootstrapdie Lösung verwendet, ist dies nur ein bisschen komplexer, da react-bootstrapInline-Stile auf das bodyElement angewendet werden, um die Stile overflowund zu paddingbearbeiten. Dies bedeutet, dass Sie diese Inline-Stile mit überschreiben müssen!important

body.modal-open {
  // enable below if you want to additionally allow scrolling with the modal displayed
  // overflow: auto !important;

  // prevent the additional padding from being applied
  padding: 0 !important;
}

HINWEIS : Wenn Sie das Scrollen nicht aktivieren (dh die Bildlaufleiste sichtbar machen), indem Sie denoverflowStilauskommentieren, wird der Seiteninhalt anscheinend um die Breite der Bildlaufleiste verschoben (sofern die Bildlaufleiste zuvor sichtbar war).

pjs
quelle
0

Meine Jquery-Lösung:

var nb = $('nav.navbar-fixed-top');
$('.modal')
    .on('show.bs.modal', function () {
        nb.width(nb.width());
    })
    .on('hidden.bs.modal', function () {
        nb.width(nb.width('auto'));
    });
Goloveichuk
quelle
0

Für Bootstrap Version 3.2.0 beheben diese Zeilen in der CSS-Datei den Fehler:

.modal-open .navbar-fixed-top,
.modal-open .navbar-fixed-bottom {
padding-right: 17px;
}

Lösung hier gefunden

Theo Orphanos
quelle
0

Die beste Lösung für mich war, diese Einstellungen zu verwenden. Es funktioniert für Web und Mobile

.modal-open {
   overflow: hidden;
   position: absolute;
   width: 100%;
   height: 100%;
}
Bartando
quelle