Javascript Bootstrap Modals 在关闭后继续向 body 添加 padding-right
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32862394/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Modals keep adding padding-right to body after closed
提问by phuwin
I am using bootstrap and Parse framework to build a small webapp. But those Bootstrap modals keep adding padding-right to body after closed. How to solve this?
我正在使用引导程序和解析框架来构建一个小型 web 应用程序。但是那些 Bootstrap 模态在关闭后不断向 body 添加 padding-right 。如何解决这个问题？
I tried to put this code in my javascript:
我试图把这段代码放在我的 javascript 中：
$('.modal').on('hide.bs.modal', function (e) {
$("element.style").css("padding-right","0");
});
But it doesn't work. Does anybody know how to fix this?
但它不起作用。有谁知道如何解决这个问题？
My 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');
}
});
}
I am using bootstrap and Parse framework to build a small webapp. But those Bootstrap modals keep adding padding-right to body after closed. How to solve this?
我正在使用引导程序和解析框架来构建一个小型 web 应用程序。但是那些 Bootstrap 模态在关闭后不断向 body 添加 padding-right 。如何解决这个问题？
采纳答案by orlland
This might be a glitch from Bootstrap modal. From my tests, it seems like the problem is that #adminPanelis being initialized while #loginModalhas not been totally closed yet. The workarounds can be removing the animation by removing the fadeclass on #adminPaneland #loginModalor set a timeout (~500ms) before calling $('#adminPanel').modal();. Hope this helps.
这可能是 Bootstrap 模式的一个小故障。从我的测试来看，问题似乎#adminPanel是在#loginModal尚未完全关闭的情况下正在初始化。了解决方法可通过移除被去除动画fade上类#adminPanel和#loginModal调用之前或设置超时（〜500毫秒）$('#adminPanel').modal();。希望这可以帮助。
回答by Ngatia Frankline
I have just used the css fix below and it is working for me
我刚刚使用了下面的 css 修复程序，它对我有用
body { padding-right: 0 !important }
回答by Suge
.modal-open {
padding-right: 0px !important;
}
Just changed to
刚改成
.modal {
padding-right: 0px !important;
}
回答by chasmani
A pure css solution that keeps the bootstrap functionality as it should be.
一个纯 css 解决方案，可以保持引导程序的功能。
body:not(.modal-open){
padding-right: 0px !important;
}
The problem is caused by a function in the bootstrap jQuery that adds a bit of padding-right when a modal window opens, if there is a scroll bar on the page. That stops your body content shifting around when the modal opens, and it's a nice feature. But it's causing this bug.
该问题是由引导 jQuery 中的一个函数引起的，如果页面上有滚动条，该函数会在模式窗口打开时添加一些填充权。当模态打开时，这会阻止您的身体内容移动，这是一个很好的功能。但它导致了这个错误。
A lot of the other solutions given here break that feature, and make your content shift slightly about when the modal opens. This solution will preserve the feature of the bootstrap modal not shifting content around, but fix the bug.
此处给出的许多其他解决方案破坏了该功能，并使您的内容在模态打开时略有变化。此解决方案将保留引导程序模式的功能，而不是四处移动内容，但会修复错误。
回答by vivekkupadhyay
If you're more concerned about the padding-rightrelated thing then you can do this
如果你更关心padding-right相关的事情，那么你可以这样做
jQuery:
jQuery：
$('#loginModal').on('show.bs.modal', function (e) {
$('body').addClass('test');
});
this will addClassto your bodyand then using this
这将给addClass你body，然后使用这个
CSS:
CSS:
.test[style] {
padding-right:0 !important;
}
and this will help you to get rid of padding-right.
这将帮助您摆脱padding-right.
But if you're also concerned about the hiding scrollthen you've to add this too:
但是，如果您还担心隐藏，scroll那么您也必须添加以下内容：
CSS:
CSS:
.test.modal-open {
overflow: auto;
}
Here's the JSFiddle
这是JSFiddle
Please have a look, it will do the trick for you.
请看一看，它会为您解决问题。
回答by Ashok Sen
Just open bootstrap.min.css
只需打开 bootstrap.min.css
Find this line (default)
找到这一行（默认）
.modal-open{overflow:hidden;}
and change it as
并将其更改为
.modal-open{overflow:auto;padding-right:0 !important;}
It will work for every modal of the site. You can do overflow:auto; if you want to keep scrollbar as it is while opening modal dialog.
它将适用于网站的每个模式。你可以做溢出：自动；如果您想在打开模态对话框时保持滚动条不变。
回答by Sam Malayek
I had this same problem for a VERY long time. None of the answers here worked! But the following fixed it!
我有很长一段时间都遇到同样的问题。这里的答案都没有奏效！但以下修复了它！
$(document.body).on('hide.bs.modal,hidden.bs.modal', function () {
$('body').css('padding-right','0');
});
There are two events that fire on closing of a modal, first it's hide.bs.modal, and then it's hidden.bs.modal. You should be able to use just one.
关闭模态时会触发两个事件，首先是hide.bs.modal，然后是hidden.bs.modal。您应该只能使用一个。
回答by Benjamin Oats
easy fix
容易修复
add this class
添加这个类
.modal-open {
overflow: hidden;
padding-right: 0 !important;
}
Its a override but works
它是一个覆盖但有效
回答by febriana andringa
I just removed the fadeclass and change the class fade effect with animation.css. I hope this will help.
我刚刚删除了fade类并使用animation.css. 我希望这将有所帮助。
回答by jcdsr
removeAttr won't work you will to remove the CSS property like this:
removeAttr 不起作用，您将像这样删除 CSS 属性：
$('.modal').on('hide.bs.modal', function (e) {
e.stopPropagation();
$('body').css('padding-right','');
});
With no property value, the property is removed.
如果没有属性值，则删除该属性。
