wake-up-neo.net

Bootstrap 3-Modal wird ausgelöst und bewirkt, dass die Seite kurzzeitig nach links verschoben wird/die Browser-Bildlaufleiste Probleme hat

Ich arbeite an einer Site, die Bootstrap 3.1.0 verwendet.

Sie werden beim Öffnen des modalen Fensters feststellen, dass die Bildlaufleiste des Browsers für einen Sekundenbruchteil ausgeblendet wird und dann wieder angezeigt wird. Es macht dasselbe, wenn Sie es schließen.

Wie kann ich es so gestalten, dass es sich ohne Browser-Bildlaufleiste öffnet und schließt. Ich habe Beiträge auf Stapel gesehen, bei denen Leute Probleme hatten, aber ich kann keine spezifische Antwort auf mein Problem finden. Wenn also jemand anderes diese Anfrage gemacht hat und jemand davon weiß und mich damit verbinden möchte, wäre ich dankbar es. Ich habe nach ungefähr 2 Stunden danach gesucht, bevor ich Beiträge verfasse.

63
Daniel White

das ist, was ich in github gefunden habe, wenn ich nach diesem Problem suche 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 diese css, wenn Sie nav-fixed-top und navbar-fixed-bottom :

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 benutzer diese css, wenn du navbar-default hast

body.modal-open-noscroll 
{
  margin-right: 0!important;
  overflow: hidden;
}
.modal-open-noscroll .navbar-default, .modal-open .navbar-default 
{
  margin-right: 0!important;
}
19
user4314713
.modal {
 overflow-y: auto;
}

.modal-open {
 overflow: auto;
}

Werde es loswerden. Dies wurde hinzugefügt, damit die Modals schneller funktionieren, sodass Sie nach unten scrollen und einen Modalmodus sehen können, wenn der Bildschirm zu kurz ist. Außerdem wird verhindert, dass der Hintergrund scrollbar ist, während ein Modalmodus aktiv ist. Wenn Sie diese Funktionalität nicht benötigen, können Sie das von mir gepostete CSS verwenden.

Einige weitere Informationen: Sie stellen .modal-open am Körper ein, wodurch das Scrollen am Körper verhindert und die Bildlaufleiste des Körpers ausgeblendet wird. Wenn der Modal hochgefahren wird, hat er den dunklen Hintergrund, der den gesamten Bildschirm einnimmt, und das hat Überlauf-y: scroll, wodurch die Bildlaufleiste zurückkehrt. Wenn also der modale Erweiterungsmodus am unteren Bildschirmrand vorbeigeht, können Sie noch scrollen dunklen Hintergrund und sehen Sie den Rest davon.

87
cjd82187

Die Behebung des Linksverschiebungsproblems lässt sich ganz einfach mit CSS erledigen.

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

Sie überschreiben nur einen Inline-Stil, der im Code vorhanden ist. Ich verwende meins 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!

63
ben.kaminski
.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.

32
Tony S

Dies ist ein gemeldeter Fehler von bootstrap: https://github.com/twbs/bootstrap/issues/9855

Und dies ist meine vorübergehende schnelle Lösung und funktioniert auch mit fester oberer 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

8
Agni Pradharma

Wenn Sie eine festgelegte 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;
}
7
Calvin Grain

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

body {
padding-right:0px !important;
margin-right:0px !important;
}
6
Dizzle
$('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");
});

Dieser kleine Fix simuliert die Bildlaufleiste, wenn der Modal angezeigt wird, und fügt dem Rumpf einen rechten Rand hinzu.

4
hect0r90

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

.modal {
 overflow-y: auto;
}

.modal-open {
 overflow: auto;
}


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

um das Problem zu lösen, wird die Seite nach rechts verschoben

html, body{
  padding: 0 !important;
}

2

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

probieren Sie diesen Code aus .__ es funktioniert wirklich

2
beast.nil

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

Wenn das modale Dialogfeld geöffnet wird, wird auch padding-right:17px; zum Haupttext hinzugefügt.

Mein Code hier

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

Wenn das Bootstrap-Modal geöffnet wird, wird die Klasse .modal-open auf body-Tag gesetzt. In diesem Tag wird overflow: hidden festgelegt. wir müssen das ändern. Fügen Sie den folgenden Code in Ihr CSS ein.

<style>
body.modal-open {
    overflow: visible !important;
}
</style>

Referenz: - So fixieren Sie den Bootstrap-Modalhintergrund nach oben scrollen

1

Ab Bootstrap 3.3.2 scheint das Verhalten so zu sein, dass die Bildlaufleisten entfernt werden, wenn das Dialogfeld angezeigt wird, und Bootstrap fügt dem body-Element etwas Rechtsauffüllung hinzu, um den Platz auszugleichen, den die Bildlaufleiste zuvor belegt hat. Leider verhindert dies die Bildschirmverschiebung zumindest in modernen Versionen von Chrome, IE, Firefox oder Safari nicht. Keines der hier beschriebenen Updates behebt dieses Problem vollständig, aber durch die Kombination der Antworten von ben.kaminski und eines Teils der Antwort von cjd82187 wird das Problem nur mit CSS gelöst:

/* 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 scrollen können, um das Modal anzuzeigen, wenn es sich über dem unteren Bildschirmrand befindet. Um diese Funktionalität beizubehalten, können Sie die CSS-Lösung in eine Medienabfrage einschließen, sodass sie nur für große Ansichtsfenster gilt, etwa wie folgt:

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

    .modal-open {
        overflow: auto;
    }   
}
1
clav

Diese einfache Lösung wurde implementiert

.modal-open {

  padding-right: 0 !important;

}

html {

  overflow-y: scroll !important;

}
1
harshal lonare

Keine der oben genannten und andere Stunden der Forschung gearbeitet. Aber der folgende Code hat mit ein bisschen CSS perfekt funktioniert. Mit den oben genannten Schritten wird der Zeilenumbruch nicht entfernt: 17px; mit js oder jquery konnte ich 0 padding hinzufügen, hatte aber keine wirkung.

.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;
}
1
Corey B

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'));
    });
0
Goloveichuk

Die beste Lösung für mich war die Verwendung dieser Einstellungen. Es funktioniert für Web und Mobile

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

wenn jemand react-bootstrap verwendet, ist die Lösung etwas komplexer, da react-bootstrap Inline-Stile auf das Element body anwendet, um die Stile overflow und padding zu bearbeiten. Das bedeutet, dass Sie diese Inline-Stile mit !important überschreiben müssen.

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;
}

NOTE: Wenn Sie das Blättern nicht aktivieren (dh die Bildlaufleiste sichtbar machen), indem Sie den Kommentarstil overflow dekommentieren, wird Ihr Seiteninhalt um die Bildlaufleistenbreite verschoben (falls die Bildlaufleiste zuvor war) sichtbar das ist).

0
pjs

Für die 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 gefunden hier

0
captain theo

Meine Seite benötigte eine modifizierte Version von Agni Pradharmas Code, um zu verhindern, dass sich der Code ändert, wenn der Modal angezeigt wird. Ich habe einen festen Nav-Header und einige Seiten mit Scroll, manche ohne. Demo hier: http://jsbin.com/gekenakoki/1/

Ich habe beide css benutzt:

.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);
};
0
knighter