Bootstrap-Modalitäten fügen dem Körper nach dem Schließen immer wieder Polsterungsrechte hinzu

Ich verwende Bootstrap und Parse Framework, um eine kleine Webanwendung zu erstellen. Aber diese Bootstrap-Modalitäten fügen dem Körper nach dem Schließen immer wieder Polsterungsrechte hinzu. Wie kann man das lösen?

Ich habe versucht, diesen Code in mein Javascript einzufügen:

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

Aber es funktioniert nicht. Weiß jemand, wie man das behebt?

Mein Code:

        <button type="button" class="btn btn-lg btn-default" data-toggle="modal" data-target="#loginModal">Admin panel</button>

         <div id="loginModal" class="modal fade" role="dialog">
                  <div class="modal-dialog modal-sm">

                    <!-- Modal content -->
                    <div class="modal-content">

                      <!-- header -->
                      <div class="modal-header"> 
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Login</h4>
                      </div>

                      <!-- body -->
                      <div class="modal-body text-center" >
                          <input class='form-control' type="text" id="userName" placeholder="Username" ng-model='username'>
                          <input class='form-control' type="password" id="password" placeholder="Password" ng-model='password'>

                      <div class="modal-footer">
                        <button type="button" class="btn btn-default" id="loginButton" ng-click="goToAdminPanel()">Login</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal" id="closeButton">Close</button>
                      </div>

                    </div>

                 </div>
                </div>
           </div>

        <div id="adminPanel" class="modal fade" role="dialog">
                  <div class="modal-dialog modal-lg">

                    <!-- Modal content -->
                    <div class="modal-content">

                      <!-- header -->
                      <div class="modal-header"> 
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Admin Panel</h4>
                      </div>

                      <!-- body -->
                      <div class="modal-body" >

                        </div>

                      <div class="modal-footer">
                        <button type="button" class="btn btn-default" id="saveButton">Save</button>

                        <button type="button" class="btn btn-default" data-dismiss="modal" id="closeButton">Close</button>



                    </div>

                 </div>
                </div>
           </div>

    $scope.goToAdminPanel = function(){
    Parse.User.logIn($scope.username,$scope.password,{
        success: function(user){
            $('#loginModal').modal('hide');
            $('#adminPanel').modal();
        },
        error: function(user, error) {
            alert('Wrong username and/or password');
        }
    });
}

Ich verwende Bootstrap und Parse Framework, um eine kleine Webanwendung zu erstellen. Aber diese Bootstrap-Modalitäten fügen dem Körper nach dem Schließen immer wieder Polsterungsrechte hinzu. Wie kann man das lösen?

Dies könnte ein Fehler von Bootstrap Modal sein. Aus meinen Tests geht hervor, dass das Problem darin besteht, dass #adminPaneles initialisiert wird, obwohl es #loginModalnoch nicht vollständig geschlossen wurde. Die Abhilfen können die Animation werden zu entfernen , indem die Entfernung fadeKlasse auf #adminPanelund #loginModaloder ein Timeout (~ 500 ms) gesetzt vor dem Aufruf $('#adminPanel').modal();. Hoffe das hilft.

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

body { padding-right: 0 !important }

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

Gerade geändert zu

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

Eine reine CSS-Lösung, die die Bootstrap-Funktionalität so hä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 auf der Seite eine Bildlaufleiste vorhanden ist. Das verhindert, dass sich Ihr Körperinhalt beim Öffnen des Modals verschiebt, und es ist eine nette Funktion. Aber es verursacht diesen Fehler.

Viele der anderen hier aufgeführten Lösungen unterbrechen diese Funktion und führen dazu, dass sich Ihre Inhalte beim Öffnen des Modals geringfügig verschieben. Diese Lösung behält die Funktion des Bootstrap-Modals bei, verschiebt den Inhalt nicht, sondern behebt den Fehler.

Wenn Sie sich mehr Gedanken über die padding-rightverwandte Sache machen, können Sie dies tun

jQuery :

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

Dies wird addClasszu Ihrem bodyund dann mit diesem

CSS :

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

und dies wird Ihnen helfen, loszuwerden padding-right.

Wenn Sie sich aber auch Sorgen um das Verstecken machen, müssen scrollSie auch Folgendes hinzufügen:

CSS :

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

Hier ist die JSFiddle

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

Öffnen Sie einfach bootstrap.min.css

Diese Zeile suchen (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 durchführen: auto; Wenn Sie die Bildlaufleiste beim Öffnen des modalen Dialogfelds beibehalten möchten.

Ich hatte das gleiche Problem sehr lange. Keine der Antworten hier 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: erstens hide.bs.modalund dann hidden.bs.modal. Sie sollten nur eine verwenden können.

einfache Lösung

füge diese Klasse hinzu

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

Es ist ein Override, funktioniert aber

Ich habe gerade die fadeKlasse entfernt und den Klassenüberblendungseffekt mit geändert animation.css. Ich hoffe das wird helfen.

removeAttr funktioniert nicht. Sie werden die CSS-Eigenschaft folgendermaßen entfernen:

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

Ohne Eigenschaftswert wird die Eigenschaft entfernt.

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

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

Das! Wichtig ist, dass das modale Bootstrap-Javascript programmgesteuert 15 Pixel Padding nach rechts hinzufügt. Ich vermute, dass es die Bildlaufleiste kompensieren soll, aber das will ich nicht.

Mit Bootstrap 4 hat das bei mir funktioniert:

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

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

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

Dadurch wird Ihr Modal angezeigt, während das Bildlauffenster noch funktioniert. danke, hoffe das hilft dir auch

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

Ich verwende, um dem Body etwas CSS hinzuzufügen, wenn ein Modal geöffnet wird, auf den Websites, auf denen noch Bootstrap 3 verwendet wird.

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

Meine Lösung erfordert kein zusätzliches CSS.

Wie von @Orland angegeben, findet ein Ereignis immer noch statt, wenn das andere beginnt. Meine Lösung besteht darin, das zweite Ereignis (das adminPanelModal anzeigen) erst zu starten, wenn das erste abgeschlossen ist (das loginModalModal ausblenden).

Sie können dies erreichen, indem Sie einen Listener wie folgt an das hidden.bs.modalEreignis Ihres loginModalModals anhängen :

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

Und wenn nötig, verstecken Sie einfach das loginModalModal.

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

Natürlich können Sie Ihre eigene Logik im Listener implementieren, um zu entscheiden, ob das adminPanelModal angezeigt werden soll oder nicht .

Weitere Informationen zu Bootstrap Modal Events erhalten Sie hier .

Viel Glück.

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

In Bootstrap 3.3.6 (der von mir verwendeten Version) ist dies die Funktion, die für das Hinzufügen dieses Auffüllrechts zum Body-Element verantwortlich ist: https://github.com/twbs/bootstrap/blob/v3.3.6/dist/js /bootstrap.js#L1180

Eine schnelle Problemumgehung besteht darin, diese Funktion nach dem Aufrufen 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;
}

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

Entfernen Sie einfach das data-targetvon der Schaltfläche und laden Sie das Modal mit jQuery.

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

jQuery:

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

Ich habe mich in das Bootstrap-Javascript eingegraben und festgestellt, dass der Modal-Code das richtige Auffüllen in einer Funktion adjustDialog()festlegt, die im Modal-Prototyp definiert und in jQuery verfügbar gemacht wird. Das Platzieren des folgenden Codes irgendwo, um diese Funktion zu überschreiben und nichts zu tun, hat den Trick für mich getan (obwohl ich nicht weiß, was die Konsequenz ist, wenn ich dies noch nicht eingestellt habe !!)

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

Dies kann das Problem lösen

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

Dies ist ein Bootstrap-Fehler, der in v4-dev behoben wurde: https://github.com/twbs/bootstrap/pull/18441 bis dahin sollte das Hinzufügen der folgenden CSS-Klasse helfen.

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

Ich hatte das gleiche Problem mit Modal und Ajax. Dies lag daran, dass auf die JS-Datei sowohl auf der ersten Seite als auch auf der von Ajax aufgerufenen Seite zweimal verwiesen wurde. Wenn also Modal geschlossen wurde, wurde das JS-Ereignis zweimal aufgerufen, wodurch standardmäßig ein Auffüllrecht von 17 Pixel hinzugefügt wurde.

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

Hat für mich gearbeitet. Beachten Sie, dass die Bildlaufleiste im Körper gezwungen ist - aber wenn Sie trotzdem eine "Bildlauf" -Seite haben, spielt es keine Rolle (?)

$('.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 um 0px zum Körper hinzugefügt.

Wenn Sie ein Modal öffnen, tritt das vorherige Modal noch nicht vollständig geschlossen auf. Um das Problem zu beheben, öffnen Sie einfach das neue Modal, wenn alle Modal vollständig geschlossen sind. Überprüfen Sie die folgenden Codes:

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

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

Ich jetzt das ist alt, und alle hier angebotenen Lösungen können funktionieren. Ich füge nur etwas Neues hinzu, falls es jemandem helfen könnte: Ich hatte das gleiche Problem und bemerkte, dass das Öffnen des Modals meinem Seitenav ein Randrecht hinzufügte (wahrscheinlich eine Art Vererbung von der Polsterung, die dem Körper hinzugefügt wurde). Das Hinzufügen von {margin-right: 0! Important;} zu meinem Seitenav hat den Trick gemacht.

(Bootstrap v3.3.7) Von meinem Browser Inspektor sah ich , dass diese direkt in das Element gesetzt Stil Eigenschaft, Hexe Überschreibungen Klasseneigenschaften.

Ich habe versucht, den Paddig-Right- Wert zurückzusetzen, wenn das Modal angezeigt wird mit:

$("#myModal").on('shown.bs.modal', function(){
    $(this).css({paddingRight:""});
});

Aber es kommt zurück, sobald die Fenstergröße geändert wird :( (wahrscheinlich aus dem Pluggin-Skript).

Diese Lösung hat bei mir funktioniert:

var modal_needfix=true;
$("#myModal").on('shown.bs.modal', function(){
    var modalscope=$(this);
    modalscope.css({paddingRight:""});
    if(modal_needfix){
        window.addEventListener("resize",function(){
            requestAnimationFrame(function(){// be sure to act after the pluggin script
                modalscope.css({paddingRight:""});
            });
        });
        modal_needfix=false;
    }
});

Wie @Orland sagt, wenn Sie einen Effekt wie Fade verwenden, müssen wir dort warten, bevor wir das Modal anzeigen. Dies ist ein bisschen hackig, reicht aber aus.

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

Ich hoffe, es gibt noch jemanden, der diese Antwort braucht. In bootstrap.js gibt es eine Funktion namens resetScrollbar (). Aus irgendeinem dummen Grund haben die Entwickler beschlossen, die Abmessungen der Bildlaufleiste zum Auffüllrecht des Körpers hinzuzufügen. Wenn Sie also die rechte Auffüllung auf eine leere Zeichenfolge setzen, wird das Problem technisch behoben