wake-up-neo.com

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

Ich benutze Bootstrap und Parse Framework, um eine kleine Webapp zu erstellen. Diese Bootstrap-Modalitäten fügen dem Körper jedoch nach dem Schließen immer Polsterungsrechte hinzu. Wie löse ich das?

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 beheben kann?

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 benutze Bootstrap und Parse Framework, um eine kleine Webapp zu erstellen. Diese Bootstrap-Modalitäten fügen dem Körper jedoch nach dem Schließen immer Polsterungsrechte hinzu. Wie löse ich das?

72
phuwin

Dies könnte eine Störung des Bootstrap-Modals sein. Bei meinen Tests scheint das Problem zu sein, dass #adminPanel initialisiert wird, während #loginModal noch nicht vollständig geschlossen wurde. Die Problemumgehungen können entfernt werden, indem Sie die fade-Klasse für #adminPanel und #loginModal entfernen oder ein Timeout (~ 500ms) festlegen, bevor Sie $('#adminPanel').modal(); aufrufen. Hoffe das hilft.

44
Orland

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

body { padding-right: 0 !important }
87

Fügen Sie einfach einen Stil hinzu:

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

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.

11
vivekkupadhyay

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.

10
LXXIII

Ö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.

8
Ashok Sen

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. 

6
chasmani

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.

2
jcdsr

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

2

einfach zu beheben

füge diese Klasse hinzu 

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

Es ist ein Override, aber funktioniert

1
Benjamin Oats

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.

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

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');
1
Edison D'souza

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.

1

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;
        }
1
Madalina Taina

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.

0
Lucas Almeida

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 () { };

0
Phil

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

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

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

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');
    });
  }
0
Sakata Gintoki
$('.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.

0
sibaspage
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 (?)

0
user3666136

Dies kann das Problem lösen

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

Mit Bootstrap 4 hat das für mich funktioniert:

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