Bootstrap Modals在关闭后继续向主体添加填充

Question

我正在使用bootstrap和Parse框架来构建一个小的webapp.但是那些Bootstrap模态在关闭后不断向正文添加填充.怎么解决这个？

我试着把这段代码放在我的javascript中:

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

但它不起作用.有人知道如何解决这个问题吗？

我的代码:

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

我正在使用bootstrap和Parse框架来构建一个小的webapp.但是那些Bootstrap模态在关闭后不断向正文添加填充.怎么解决这个？

Answer 1

我刚刚使用了下面的css修复程序,它对我有用

body { padding-right: 0 !important }

Answer 2

只需添加这样的样式:

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

Answer 3

这可能是Bootstrap模式的一个小故障.从我的测试来看,问题似乎#adminPanel是在初始化时#loginModal尚未完全关闭.解决方法可以通过删除fade类来删除动画#adminPanel,#loginModal或者在调用之前设置超时(~500ms)$('#adminPanel').modal();.希望这可以帮助.

Answer 4

如果你更关心padding-right相关的事情,那么你可以做到这一点

jQuery:

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

这将addClass是你的body,然后使用它

CSS:

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

这将帮助你摆脱padding-right.

但如果你也担心隐藏,scroll那么你也要添加它:

CSS:

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

这是JSFiddle

请看一下,它会为你做的伎俩.

Answer 5

只需打开bootstrap.min.css即可

找到这一行(默认)

.modal-open{overflow:hidden;}

并将其更改为

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

它适用于网站的每个模式.你可以做溢出:auto; 如果你想在打开模态对话框时保持滚动条的原样.

Answer 6

一种纯css解决方案,可以保持引导功能.

body:not(.modal-open){
  padding-right: 0px !important;
}

问题是由引导程序jQuery中的一个函数引起的,如果页面上有滚动条,则在模式窗口打开时添加一些填充权限.当模态打开时,这会阻止您的身体内容移动,这是一个很好的功能.但它导致了这个错误.

此处给出的许多其他解决方案都会破坏该功能,并使您的内容在模式打开时略微移动.此解决方案将保留引导模式的功能,而不是移动内容,但修复错误.

Answer 7

很长一段时间我都有同样的问题.这里的答案都没有奏效!但以下修好了!

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

关闭模态时会触发两个事件,首先是它hide.bs.modal,然后是它hidden.bs.modal.你应该只能使用一个.

Answer 8

这对我有用：

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