Bootstrap-Modale fügen dem Körper nach dem Schließen weiterhin Polsterungsrechte hinzu

Ich habe gerade das CSS-Update unten verwendet und es funktioniert für mich

body { padding-right: 0 !important }

Fügen Sie einfach einen Stil hinzu:

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

Wenn Sie sich mehr mit der padding-right-bezogenen Sache beschäftigen, können Sie dies tun

jQuery:

$('#loginModal').on('show.bs.modal', function (e) {
     $('body').addClass('test');
});

dies wird addClass zu Ihrem body und dann mit diesem 

CSS:

.test[style] {
     padding-right:0 !important;
 }

und dies wird Ihnen helfen, padding-right loszuwerden.

Wenn Sie sich jedoch auch Gedanken über das Verbergen von scroll machen, müssen Sie Folgendes hinzufügen:

CSS:

.test.modal-open {
    overflow: auto;
 }

Hier ist das JSFiddle

Bitte schauen Sie, es wird den Trick für Sie tun.

Ich hatte das gleiche Problem SEHR lange. Keine der Antworten hat funktioniert! Aber das Folgende hat es behoben!

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

Es gibt zwei Ereignisse, die beim Schließen eines Modals ausgelöst werden, zuerst hide.bs.modal und dann hidden.bs.modal. Sie sollten nur einen verwenden können.

Öffnen Sie einfach bootstrap.min.css

Diese Zeile finden (Standard)

.modal-open{overflow:hidden;}

und ändern Sie es als

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

Es funktioniert für jedes Modal der Site. Sie können einen Überlauf machen: auto; wenn Sie die Bildlaufleiste beibehalten möchten, während Sie das modale Dialogfeld öffnen.

Eine reine css-Lösung, die die Bootstrap-Funktionalität so beibehält, wie sie sein sollte. 

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

Das Problem wird durch eine Funktion in der Bootstrap-jQuery verursacht, die beim Öffnen eines modalen Fensters ein wenig Auffüllrecht hinzufügt, wenn sich auf der Seite eine Bildlaufleiste befindet. Dadurch wird verhindert, dass sich Ihr Körperinhalt ändert, wenn die Modalität geöffnet wird. Dies ist eine schöne Funktion. Aber es verursacht diesen Fehler.

Bei vielen anderen Lösungen, die hier beschrieben werden, wird diese Funktion durchbrochen und der Inhalt wird beim Öffnen des Modals leicht verschoben. Diese Lösung behält die Funktion des Bootstrap-Modals bei, wobei der Inhalt nicht verschoben wird, sondern der Fehler behoben wird. 

removeAttr wird nicht funktionieren Sie werden die CSS-Eigenschaft wie folgt entfernen:

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

Ohne Eigenschaftswert wird die Eigenschaft entfernt.

Ich habe gerade die fade-Klasse entfernt und den Klassen-Fade-Effekt mit animation.css geändert. Ich hoffe das wird helfen.

einfach zu beheben

füge diese Klasse hinzu 

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

Es ist ein Override, aber funktioniert

Bootstrap-Modelle fügen dem Körper dieses Polster hinzu, wenn der Körper überläuft.

Bei Bootstrap 3.3.6 (der Version, die ich verwende) ist dies die Funktion, die zum Hinzufügen dieses Auffüllrechts zum body-Element verwendet wird: https://github.com/twbs/bootstrap/blob/v3. 3.6/dist/js/bootstrap.js # L1180

Eine schnelle Problemumgehung besteht darin, diese Funktion nach dem Aufruf der Datei bootstrap.js einfach zu überschreiben:

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

Dies hat das Problem für mich behoben.

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

Entfernen Sie einfach den data-target von der Schaltfläche und laden Sie den Modal mit jQuery. 

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

jQuery:

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

Ich lade das Standard-Bootstrap 3.3.0-CSS und hatte ein ähnliches Problem . Gelöst durch Hinzufügen dieses CSS

body.modal-open { overflow:inherit; padding-right:inherit !important;}

Das! Ist wichtig, da Bootstrap-Modal-Javascript programmgesteuert 15px Padding zum rechten hinzufügt. Meine Vermutung ist, dass es die Bildlaufleiste kompensieren soll, aber das will ich nicht.

Ich weiß, dass dies eine alte Frage ist, aber keine der Antworten hier löste das Problem in ähnlichen Situationen und ich dachte, es wäre für einige Entwickler nützlich, meine Lösung zu lesen.

Ich füge dem Body CSS hinzu, wenn ein Modal geöffnet wird, in den Websites, auf denen es noch verwendet wird, Bootstrap 3.

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

Meine Lösung erfordert kein zusätzliches CSS.

Wie @Orland zeigt, findet immer noch ein Ereignis statt, wenn das andere beginnt. Meine Lösung besteht darin, das zweite Ereignis (das adminPanel-Modal zeigt) nur zu starten, wenn das erste abgeschlossen ist (das loginModal-Modal ausgeblendet ist).

Sie können dies erreichen, indem Sie einen Listener an das hidden.bs.modal -Ereignis Ihres loginModal-Modals wie folgt anhängen:

$('#loginModal').on('hidden.bs.modal', function (event) {
    $('#adminPanel').modal('show');
}

Und wenn nötig, blenden Sie einfach die loginModal-Modalität aus.

$('#loginModal').modal('hide');

Natürlich können Sie Ihre eigene Logik innerhalb des Listeners implementieren, um zu entscheiden, ob die Modalität adminPanel angezeigt werden soll oder nicht.

Weitere Informationen zu Bootstrap Modal Events hier .

Viel Glück.

Ich hatte das gleiche Problem mit Modals und Ajax. Dies war darauf zurückzuführen, dass auf die JS-Datei zweimal verwiesen wurde, und zwar sowohl auf der ersten als auch auf der von ajax aufgerufenen Seite. Wenn also modal geschlossen wurde, wurde das JS-Ereignis zweimal aufgerufen, wodurch standardmäßig ein Auffüllrecht von 17px hinzugefügt wird.

Ich grub mich in das Bootstrap-Javascript und stellte fest, dass der Modal-Code die richtige Auffüllung in einer Funktion namens adjustDialog() setzt, die im Modal-Prototyp definiert und in jQuery verfügbar gemacht wird. Platzieren Sie den folgenden Code irgendwo, um diese Funktion zu überschreiben, um nichts zu tun, war der Trick für mich (obwohl ich nicht weiß, was die Folge ist, wenn ich das noch nicht gesetzt habe !!)

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

Ich habe das gleiche Problem mit Bootstrap 3.3.7 und meiner Lösung für die feste Navigationsleiste: Hinzufügen dieses Stils zu Ihrer benutzerdefinierten CSS.

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

ihr Modal wird angezeigt, während das Fenster noch läuft. Vielen Dank, ich hoffe, das wird Ihnen auch helfen

Das hat bei mir funktioniert:

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

Dies ist ein Bootstrap-Fehler, der in v4-dev behoben wurde: https://github.com/twbs/bootstrap/pull/18441

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

Es tritt auf, wenn Sie ein Modal öffnen, das vorher noch nicht vollständig geschlossen wurde. Um dies zu beheben, öffnen Sie einfach einen neuen Modal zu dem Zeitpunkt, zu dem alle Modalmodule vollständig geschlossen sind.

  showModal() {
    let closeModal = $('#your-modal');

    closeModal.modal('hide');
    closeModal.on('hidden.bs.modal', function() {
      $('#new-open-modal').modal('show');
    });
  }

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

Versuche dies 

Nach dem modalen Schließen wird die Polsterung rechts 0px hinzugefügt.

body {
    padding-right: 0 !important;
    overflow-y: scroll!important;
}

Arbeitete für mich. Beachten Sie, dass die Bildlaufleiste im Textkörper erzwungen wird. Wenn Sie jedoch eine "Bildlauf" -Seite haben, ist es egal (?)

Dies kann das Problem lösen

.shop-modal.modal.fade.in {
    padding-right: 0px !important;
}

Mit Bootstrap 4 hat das für mich funktioniert:

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