Bootstrap Modals 在关闭后继续向 body 添加 padding-right

Question

我正在使用 Bootstrap 和 Parse 框架来构建一个小型网络应用程序。但是那些 Bootstrap 模态框在关闭后会继续向 body 添加 padding-right。如何解决这个问题？

我试图将此代码放入我的 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 框架来构建一个小型网络应用程序。但是那些 Bootstrap 模态框在关闭后会继续向 body 添加 padding-right。如何解决这个问题？

原文由 phuwin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这可能是 Bootstrap 模态的一个小故障。从我的测试来看，问题似乎是 #adminPanel 正在初始化，而 #loginModal 尚未完全关闭。 The workarounds can be removing the animation by removing the fade class on #adminPanel and #loginModal or set a timeout (~500ms) before calling $('#adminPanel').modal(); 。希望这可以帮助。

原文由 orlland 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

body { padding-right: 0 !important }

原文由 Ngatia Frankline 发布，翻译遵循 CC BY-SA 3.0 许可协议