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">×</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">×</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?
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.
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');
});