Bootstrap-Modale fügen dem Körper nach dem Schließen immer Füllrecht hinzu

Könnte dies ein glitch von Bootstrap-modal. Aus meinen tests, es scheint, das problem ist, dass #adminPanel initialisiert wird, während #loginModal nicht vollständig abgeschlossen. Die workarounds werden kann, entfernen Sie die animation durch das entfernen der fade Klasse #adminPanel und #loginModal oder ein timeout (~500ms) vor dem Aufruf $('#adminPanel').modal();. Hoffe, das hilft.

InformationsquelleAutor der Antwort Orland

Fügen Sie einfach einen style wie:

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

InformationsquelleAutor der Antwort Suge

Ich hatte das gleiche problem für eine SEHR lange Zeit. Keine der Antworten hier war! Aber die folgenden Feste!

$(document.body).on('hide.bs.modal,hidden.bs.modal', function () {
    $('body').css('padding-right','0');
});

Gibt es zwei Ereignisse, die das Feuer auf das schließen des modalen, zuerst es hide.bs.modal, und dann ist es hidden.bs.modal. Sie sollten in der Lage sein, die Verwendung von nur einem.

InformationsquelleAutor der Antwort LXXIII

Einer reinen css-Lösung, die hält die bootstrap-Funktionalität, wie es sein sollte.

body:not(.modal-open){
  padding-right: 0px !important;
}

Das problem entsteht durch eine Funktion in der bootstrap, jQuery, fügt ein wenig Polsterung-Recht, wenn ein modales Fenster geöffnet wird, wenn es eine scroll-Leiste auf der Seite. Das hält Ihren Körper-Inhalt verschieben, wenn das modal öffnet, und es ist ein nettes feature. Aber es verursacht diese Fehler.

Viele andere Lösungen, die hier gegeben werden, brechen Sie diese Funktion und Ihre Inhalte shift etwas über, wenn das modal öffnet. Diese Lösung wird die Erhaltung der Funktion der bootstrap-modal-nicht die Verlagerung von Inhalten um, aber den Fehler beheben.

InformationsquelleAutor der Antwort chasmani

Entfernen Sie einfach die data-target vom button und laden Sie die modale Verwendung von jQuery.

<button id='myBtn' data-toggle='modal'>open modal</button>

jQuery:

$("#myBtn").modal('show');

InformationsquelleAutor der Antwort Edison D'souza

Ich weiß, das ist eine alte Frage, aber keine Antworten von hier entfernt, das problem in meinem ähnlichen Situationen und ich dachte, es wäre nützlich für einige Entwickler zu Lesen meine Lösung auch.

Ich verwenden, fügen Sie einige CSS für den Körper, wenn ein modal geöffnet wird, in den Webseiten, wo es ist noch verwendet bootstrap 3.

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

InformationsquelleAutor der Antwort Madalina Taina

removeAttr wird nicht funktionieren, Sie wird zum entfernen der CSS-Eigenschaft wie folgt:

        $('.modal').on('hide.bs.modal', function (e) {
            e.stopPropagation();
            $('body').css('padding-right','');
        }); 

Ohne Wert der Eigenschaft, die Eigenschaft ist entfernt.

InformationsquelleAutor der Antwort jcdsr

Wühlte ich in die bootstrap-javascript und festgestellt, dass der Modal-code setzt die Rechte Auffüllung in eine Funktion namens adjustDialog() definiert ist, auf den Modal prototype und ausgesetzt auf jQuery. Platzieren Sie den folgenden code irgendwo diese Funktion außer Kraft setzen, nichts zu tun hat den trick für mich (obwohl ich nicht weiß, welche Folge die Einstellung nicht dies ist noch!!)


$.fn.modal.Constructor.prototype.adjustDialog = function () { };


InformationsquelleAutor der Antwort Phil

Gleiche problem habe ich mit Bootstrap 3.3.7 und meine Lösung für fixed navbar: dieser Stil Hinzufügen, um Ihre benutzerdefinierten css-Dateien.

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

wird es Ihre modalen zeigte, während scroll-Fenster noch bearbeitet werden.
vielen Dank, hoffe, dass dies helfen wird, Sie zu

InformationsquelleAutor der Antwort Debrian Ruhut Saragih

$('.modal').on('hide.bs.modal,hidden.bs.modal', function () {
 setTimeout(function(){
  $('body').css('padding-right',0);
 },1000);
});

Versuchen, diese

Wird es fügen Sie die Polsterung Recht 0px, um den Körper nach der modalen schließen.

InformationsquelleAutor der Antwort sibaspage

Dies ist was für mich gearbeitet:

body.modal-open {
    overflow: auto !important;
}

//Bootstrap uses JS to set the element style so you can
//override those styles like this
body.modal-open[style] {
    padding-right: 0px !important;
}

InformationsquelleAutor der Antwort Jack

Als @Orland sagt, wenn Sie einige Effekte wie fade-dann müssen wir warten vor der Anzeige des modal, dies ist eine etwas hacky, aber wird den trick tun.

function defer(fn, time) {
    return function () {
        var args = arguments,
            context = this;

        setTimeout(function () {
            fn.apply(context, args);
        }, time);
    };
}

$.fn.modal.Constructor.prototype.show = defer($.fn.modal.Constructor.prototype.show, 350);

InformationsquelleAutor der Antwort netomo

Dies ist ein bootstrap-bug und gefixt in v4-dev: https://github.com/twbs/bootstrap/pull/18441
bis dann hinzufügen unter CSS-Klasse sollte helfen.

.fixed-padding {
  padding-right: 0px !important;
}

InformationsquelleAutor der Antwort Ruchita Kasliwal

Bootstrap-Modelle hinzufügen, padding-right, um den Körper, wenn der Körper überfüllt ist.

Bootstrap 3.3.6 (die version die ich verwende) dies ist die Funktion, die verantwortlich für das hinzufügen, dass padding-right für das body-element:
https://github.com/twbs/bootstrap/blob/v3.3.6/dist/js/bootstrap.js#L1180

Eine schnelle Abhilfe ist, einfach überschreiben, dass die Funktion nach dem Aufruf der bootstrap.js Datei:

$.fn.modal.Constructor.prototype.setScrollbar = function () { };

Diese behoben das Problem für mich.

InformationsquelleAutor der Antwort scottx

dies sollte das Problem beheben

body {
    padding: 0 !important 
}

InformationsquelleAutor der Antwort david