Bootstrap Modals在closures之后不断添加填充

你可以从这个video检查错误。

我试图把这个代码放在我的javascript：

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

但它不起作用。 有谁知道如何解决这个问题？ 你可以在这里看到这个网站。
用户名和密码：admin / Koodaus1

我的代码：

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

Answer 1

这可能是Bootstrap模式的一个小故障。 从我的testing，似乎问题是#adminPanel正在初始化，而#loginModal尚未完全closures。 解决方法是通过删除#adminPanel和#loginModal上的fade类或在调用$('#adminPanel').modal();之前设置超时（ #loginModal来移除animation$('#adminPanel').modal(); 。 希望这可以帮助。

Answer 2

我刚刚使用了下面的CSS修复，它正在为我工​​作

 body { padding-right: 0 !important } 

Answer 3

只要添加一个这样的风格：

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

Answer 4

如果你更关心padding-right相关的东西，那么你可以做到这一点

jQuery ：

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

这会将类添加到你的body ，然后使用这个

CSS ：

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

这将帮助你摆脱padding-right 。

但是，如果你也关心隐藏的scroll那么你也必须添加这个：

CSS ：

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

这是JSFiddle

请看看，它会为你做的伎俩。

Answer 5

只需打开bootstrap.min.css

find这一行（默认）.modal-open {overflow：hidden;}

并将其更改为.modal-open {overflow：auto; padding-right：0！important;}

它将适用于网站的每个模式。 你可以做溢出：auto; 如果你想保持滚动条，因为它是打开模式对话框。

Answer 6

我有很长的一段时间同样的问题。 没有任何答案在这里工作！ 但下面修好了！

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

有两个事件在closures模式时触发，首先是hide.bs.modal ，然后是hidden.bs.modal 。 这不是一个可怕的修复！ 非常stream畅！ 你甚至都看不到填充权。

你可能不需要两个。 但是我很沮丧，我决定用锤子而不是手术刀。

Answer 7

我刚刚删除了fade类，并使用animation.css更改了类淡入淡出效果。 我希望这将有所帮助。

Answer 8

只需从button中删除data-target ，并使用jQuery加载模式。

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

jQuery的：

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

Answer 9

容易修复

添加这个类

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

它的重写，但工程

Answer 10

我知道这是一个古老的问题，但没有一个来自这里的答案在类似的情况下解决了这个问题，我认为这对于一些开发人员来说也是有用的。

我使用添加一些CSS的身体当打开一个模式，在它仍然使用的网站引导3。

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

Answer 11

我的解决scheme不需要任何额外的CSS。

正如@欧兰指出的那样，另外一个事件还在发生。 我的解决scheme是只有当第一个事件完成（隐藏adminPanel模式）时才开始第二个事件（显示loginModal模式）。

您可以通过将侦听器附加到loginModal模式的hidden.bs.modal事件来完成此操作，如下所示：

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

而且，如有必要，只需隐藏loginModal模式即可。

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

你可以在监听器中实现自己的逻辑，以决定是否显示adminPanel模式。

你可以在这里获得更多关于Bootstrap Modal Events的信息 。

祝你好运。

Answer 12

removeAttr将无法工作，您将删除像这样的CSS属性：

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

没有财产价值的财产被删除。

Answer 13

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

Answer 14

我深入到bootstrap JavaScript中，发现Modal代码在一个名为adjustDialog()的函数中设置了正确的填充，这个函数在Modal原型上定义并在jQuery上公开。 把下面的代码放在某个地方来覆盖这个函数，对我来说什么都没有做（尽pipe我不知道没有设置它的结果是什么!!）

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

Answer 15

这可以解决这个问题

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

Answer 16

我有与Bootstrap 3.3.7相同的问题，我的解决scheme为固定的导航栏：将此样式添加到您的自定义CSS。

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

它会让你的模式显示，而滚动窗口仍然工作。 谢谢，希望这也能帮助你

Answer 17

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

为我工作。 请注意滚动条强制在身体 – 但如果你有一个“滚动”页面无论如何，没关系（？）

Answer 18

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

尝试这个

它将在模式closures之后将正确的填充0px添加到主体。

Answer 19

（Bootstrap v3.3.7）从我的浏览器检查器，我看到这是直接设置在元素样式属性，巫婆覆盖类属性。

当模式显示时，我尝试“重置” paddig-right值：

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

但是一旦窗口resize就会返回:(可能来自插件脚本）。

这个解决scheme为我工作：

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

Answer 20

正如@欧兰兰说，如果你正在使用一些像淡出效果那么我们需要等待显示模式之前，这是有点hacky，但会做的伎俩。

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

Answer 21

我已经尝试了很多东西，但为我工作的小东西。

  body { font-size: 12px; font-family: brownFont; padding-right: 0 !important ; } 

Answer 22

这是一个引导错误，并在v4-dev中修复： https ： //github.com/twbs/bootstrap/pull/18441，直到然后添加CSS类以下应该帮助。

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

Answer 23

我有同样的问题，使用模态和Ajax。 这是因为JS文件被引用了两次，第一页和ajax所调用的页面都是这样，所以当模式被closures的时候，它会调用JS事件两次，默认情况下会增加一个17px的内存。

Answer 24

如果身体溢出，Bootstrap模型会将填充权添加到身体。

在引导3.3.6（我使用的版本）这是负责添加填充右侧的正文元素的function： https : //github.com/twbs/bootstrap/blob/v3.3.6/dist/js /bootstrap.js#L1180

快速的解决方法是在调用bootstrap.js文件之后简单地覆盖该函数：

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

这为我解决了这个问题。

Answer 25

我希望还有人需要这个答案。 在bootstrap.js中有一个叫做resetScrollbar（）的函数，由于一些愚蠢的原因，开发人员决定将滚动条的尺寸添加到body的填充权限。 所以在技术上，如果你只是设置右填充空string，它将解决这个问题

Answer 26

这应该解决这个问题

 body { padding: 0 !important } 

Answer 27

设置绝对位置到身体：

 body { position: absolute; } 

所以填充不会影响身体。