Bootstrap模态在关闭后继续向身体添加填充物

我正在使用bootstrap和Parse框架来构建一个小型Webapp。但是那些Bootstrap模态在关闭后会继续向主体添加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框架来构建一个小型Webapp。但是那些Bootstrap模态在关闭后会继续向主体添加padding-right。如何解决呢？

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

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

body { padding-right: 0 !important }

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

刚改成

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

一个纯CSS解决方案，可保持应有的引导功能。

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

该问题是由引导jQuery中的函数引起的，如果页面上有滚动条，则该函数会在模式窗口打开时向右添加一些填充。当模式打开时，这可以阻止您的身体内容四处移动，这是一个不错的功能。但这是导致此错误的原因。

此处提供的许多其他解决方案都破坏了该功能，并使您的内容在模式打开时略有偏移。此解决方案将保留引导程序模式的功能，而不是转移内容，但会修复错误。

如果您更关心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

请看一下，它将为您解决问题。

只需打开bootstrap.min.css

查找此行（默认）

.modal-open{overflow:hidden;}

并将其更改为

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

它将适用于该网站的所有模式。你可以做溢出：如果要在打开模式对话框时保持滚动条不变。

我有很长一段时间都遇到同样的问题。这里没有答案有效！但是下面的问题解决了！

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

在关闭模式时会触发两个事件，首先是hide.bs.modal，然后是hidden.bs.modal。您应该只能使用一个。

容易修复

添加此类

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

它是一个替代但有效

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

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

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

没有属性值，该属性将被删除。

我正在加载默认的Bootstrap 3.3.0 CSS，并且遇到了类似的问题。通过添加以下CSS来解决：

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

！important是因为引导模态javascript以编程方式向右侧添加了15px的填充。我的猜测是要补偿滚动条，但我不希望这样做。

使用Bootstrap 4可以为我工作：

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

我对Bootstrap 3.3.7和固定的导航栏有相同的问题：将此样式添加到自定义CSS中。

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

当滚动窗口仍在工作时，它将使您的模式显示出来。谢谢，希望对您有帮助

我知道这是一个古老的问题，但是在我的类似情况下，这里没有任何答案可以解决问题，并且我认为对于某些开发人员来说，阅读我的解决方案也很有用。

我在打开模态时在仍然使用引导程序3的网站中向主体添加一些CSS。

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

我的解决方案不需要任何其他CSS。

正如@Orland所指出的，当另一个事件开始时，一个事件仍在发生。我的解决方案是adminPanel仅在第一个事件完成（隐藏模式）时才开始第二个事件（显示loginModal模式）。

您可以通过将侦听器附加到模态hidden.bs.modal事件来实现此目的，loginModal如下所示：

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

并且，在必要时，只需隐藏loginModal模式即可。

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

当然，您可以在侦听器内部实现自己的逻辑，以便决定是否显示adminPanel模式。

您可以在此处获取有关Bootstrap Modal Events的更多信息。

祝好运。

如果主体溢出，Bootstrap模型会在主体上添加该padding-right。

在bootstrap 3.3.6（我正在使用的版本）上，这是负责将padding-right添加到body元素的函数：https : //github.com/twbs/bootstrap/blob/v3.3.6/dist/js /bootstrap.js#L1180

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

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

这为我解决了这个问题。

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

这对我有用：

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

只需data-target从按钮中删除并使用jQuery加载模式即可。

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

jQuery的：

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

我研究了引导javascript，发现Modal代码adjustDialog()在Modal原型中定义并在jQuery上公开的函数中设置了正确的填充。将以下代码放置在某个位置以覆盖此功能而不执行任何操作（尽管我不知道尚未设置此操作的后果是什么！）。

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

这样可以解决问题

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

这是一个自举错误，已在v4-dev中修复：https : //github.com/twbs/bootstrap/pull/18441， 直到在CSS类下面添加应该会有所帮助。

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

我在使用模态和Ajax时遇到了同样的问题。这是因为JS文件在首页和ajax调用的页面中都被引用了两次，所以在关闭模式时，它两次调用JS事件，默认情况下，其右填充为17px。

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

为我工作。请注意，滚动条是强制插入正文的-但是如果您仍然有一个“滚动”页面，则没关系（？）

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

试试这个

模态关闭后，它将向主体添加右边的填充0px。

当您打开一个模态时，会发生以前的模态尚未完全关闭的情况。要修复此问题，只需在所有模态完全关闭时打开新模态，请检查以下代码：

  showModal() {
    let closeModal = $('#your-modal');

    closeModal.modal('hide');
    closeModal.on('hidden.bs.modal', function() {
      $('#new-open-modal').modal('show');
    });
  }

我现在已经很老了，这里提供的所有解决方案都可以使用。我只是添加一些新的东西，以防他人使用：我遇到了同样的问题，并注意到打开模式会为我的sidenav添加一个margin-right（可能是从添加到body的padding的一种继承）。在我的sidenav中添加{margin-right：0！important;}可以达到目的。

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

当模态显示为时，我试图“重置” paddig-right值：

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

但是一旦调整窗口大小，它就会回来:(（可能来自pluggin脚本）。

这个解决方案为我工作：

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

正如@Orland所说，如果您使用诸如淡入淡出之类的效果，那么我们需要在显示模态之前等待，这有点棘手，但是可以解决问题。

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

我希望仍然有人需要这个答案。bootstrap.js中有一个名为resetScrollbar（）的函数，出于某些愚蠢的原因，开发人员决定将滚动条尺寸添加到主体的填充右边。因此从技术上讲，如果您仅将右填充设置为空字符串，则可以解决此问题