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

Posted 2023-02-22

【中文标题】Bootstrap Modals 关闭后继续向 body 添加 padding-right

【英文标题】：Bootstrap Modals keep adding padding-right to body after closed

【发布时间】：2015-12-28 00:30:17

【问题描述】：

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

【问题讨论】：

它不仅添加padding-right，还添加类为modal-open for overflow: hidden，它只是为了隐藏滚动条。

@vivekkupadhyay 嗨，我试图用padding-right:0 !important; 覆盖modal-open，但它不起作用，你知道为什么吗？

请在下面查看我的答案，它肯定对你有帮助。

你几乎明白了。您在正确的事件上触发 padding-right css 属性更新，但您在错误的元素上触发它。它需要在body 元素上触发。请在下面查看我的答案。

见：***.com/a/65027287/7186739

【参考方案1】：

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

body  padding-right: 0 !important 

【讨论】：

您拥有正确的 css 属性，但这需要在 hide.bs.modal 引导事件上触发。请在下面查看我的答案。

【参考方案2】：

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

【讨论】：

我从 #loginModal 中删除了 .fade 类，它可以工作。

如果我想解决这个问题，同时保持模态动画怎么办？

@LeonardoMontenegro 我也想要这个，最近我也发布了同样的问题，问题是动画被删除，但我通过在隐藏之前首先删除淡入淡出类并在隐藏它之后再次添加它来修复它尽管这是一种解决方法而不是正确的解决方案，但除非引导程序在文件本身中修复它，否则它仍然有效

【参考方案3】：

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

刚刚改成

.modal 
    padding-right: 0px !important;

【讨论】：

这是真正正确的答案——“不要使用淡入淡出功能”是一种妥协，而不是解决方案。

我做了同样的事情，但可能还需要添加“溢出：自动！重要”，因为当显示模式时，滚动条也被隐藏了。

我使用选择器“.modal.fade.show”将我所有的模态对象都设置为淡入淡出类。

将相同的样式添加到 .modal.fade.show 也可以

谢谢！我需要两者，因为modal 面板和body.modal-open 都有填充。但这很好地解决了它

【参考方案4】：

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

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

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

这里给出的许多其他解决方案都破坏了该功能，并使您的内容在模态打开时略有变化。此解决方案将保留引导模式的功能，不会移动内容，而是修复错误。

【讨论】：

我不知道为什么有人不想要 CSS 解决方案。我不想要 JS 解决方案。这个看起来不错。

我需要这个，因为如果我解除了模态（在模态内的 Asyc-Postback 之后），那么它仍然会保留那个奇怪的填充。但是，当我在页面上有任何滚动条时，我仍然需要 @Benjamin Oats 的回答才能正常工作。

这个在 Bootstrap 4 中仍然很好用。唯一对我有用的解决方案

【参考方案5】：

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

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

【讨论】：

好像不行。或者我做错了什么。每次我关闭管理面板时，它仍会将padding-right 添加到body，并将padding-right 的数量增加15px。

我刚刚检查了您的 link，您的代码似乎没有执行，因为它的 $(document).ready(function() 尝试将您的 code 放入其中。

尝试在您的代码中放置一个警报，然后您可以检查您的代码是否没有运行。它在小提琴上工作正常，并且只有在你相应地使用它时才能在你的页面上工作

由于某种原因，显示模态时代码没有运行。

@vivekkupadhyay 非常感谢您的努力。祝你有美好的一天。

【参考方案6】：

只要打开 bootstrap.min.css

找到这一行（默认）

.modal-openoverflow:hidden;

并将其更改为

.modal-openoverflow:auto;padding-right:0 !important;

它适用于网站的每个模式。你可以做溢出：自动；如果您想在打开模式对话框时保持滚动条不变。

【讨论】：

@Ashok 你能详细说明问题的原因吗？

这个解决方案为我指明了正确的方向。但是，我没有修改 bootstrap.min.css，而是将 .modal-openoverflow:auto;padding-right:0 !important; 放在我的主题样式表中，并且它起作用了！

永远不要直接编辑 bootstrap 的 css。始终将覆盖添加到您自己的样式表中的 css。就像@PratyushDeb 建议的那样。

这不是一个很好的解决方案，因为它允许滚动模态背后的内容。模式使该内容变灰，因为用户应该与它交互并且只有它。

这应该是最可靠的答案。谢谢

【参考方案7】：

我有同样的问题很长时间了。这里的答案都没有奏效！但以下修复了它！

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

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

【讨论】：

当我为hide.bs.modal 和hidden.bs.modal 添加监听器时，它对我不起作用。但是当我从监听器中删除 hide.bs.modal 时效果很好。 :)

致反对者：请在评论中留下建设性的批评，以便我改进这个答案。

【参考方案8】：

轻松解决

添加这个类

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

这是一个覆盖但有效

【讨论】：

这个类，结合@Chasmani 发布的答案，为我做了一个全面而完整的解决方案。还 +1 表示“添加此类”。在这里阅读每个人的回复建议覆盖 Bootstrap.css 文件真是太疯狂了。保留该文件，并拥有您自己的 CSS 文件，您可以在其中应用任何“Bootstrap Overrides”。这很重要，因此您可以将它们全部记录在一个地方，在更新/升级 Bootstrap 时不会丢失它们，并在升级到新的 Bootstrap 版本后查看它们（以查看您是否仍然需要解决方法）。

我同意@MikeTeeVee 你绝对不应该编辑引导 css。我没有将其包含在我的答案中，因为我认为它稍微超出了回答这个问题的范围

【参考方案9】：

这对我有用：

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;

【讨论】：

在 Chrome 中工作！谢谢。

【参考方案10】：

我正在加载默认的 bootstrap 3.3.0 CSS 并且遇到了类似的问题。 通过添加此 CSS 解决：

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

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

【参考方案11】：

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

【参考方案12】：

我知道这是一个老问题，但这里的答案都没有解决我在类似情况下的问题，我认为一些开发人员也可以阅读我的解决方案。

我习惯在打开模式时向正文添加一些 CSS，在仍然使用引导程序 3 的网站中。

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

【参考方案13】：

removeAttr 不起作用，您可以像这样删除 CSS 属性：

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

没有属性值，属性被移除。

【参考方案14】：

使用 Bootstrap 4 这对我有用：

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

【参考方案15】：

我对 Bootstrap 3.3.7 和我的固定导航栏解决方案有同样的问题：将此样式添加到您的自定义 css。

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

它会在滚动窗口仍在工作时显示您的模式。 谢谢，希望对你也有帮助

【参考方案16】：

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

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

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

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

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

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

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

您可以获取有关 Bootstrap 模态事件here 的更多信息。

祝你好运。

【参考方案17】：

如果 body 溢出，Bootstrap 模型会将 padding-right 添加到 body。

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

这为我解决了这个问题。

【参考方案18】：

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

【参考方案19】：

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

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

jQuery:

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

【参考方案20】：

我研究了引导 javascript，发现 Modal 代码在一个名为 adjustDialog() 的函数中设置了正确的填充，该函数在 Modal 原型上定义并在 jQuery 上公开。将以下代码放在某处以覆盖此函数以什么都不做对我来说是诀窍（尽管我不知道不设置它的后果是什么！！）

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

【参考方案21】：

这样可以解决问题

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

【参考方案22】：

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

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

【参考方案23】：

我在使用 modals 和 ajax 时遇到了同样的问题。因为这个js文件被引用了两次，分别是在首页和ajax调用的页面，所以当modal关闭的时候，调用了两次JS事件，默认添加了17px的padding-right。

【参考方案24】：

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

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

【参考方案25】：

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

试试这个

它会在模态关闭后将填充右0px添加到body。

【参考方案26】：

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

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

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

【参考方案27】：

我现在这是旧的，这里提供的所有解决方案都可以工作。我只是添加一些新的东西以防万一：我遇到了同样的问题，并注意到打开模式正在向我的 sidenav 添加一个边距（可能是从添加到正文的填充中继承的一种继承）。将 margin-right:0 !important; 添加到我的 sidenav 就可以了。

【参考方案28】：

正如@Orland 所说，如果您正在使用诸如淡入淡出之类的效果，那么我们需要在显示模态之前等待，这有点 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);

【参考方案29】：

我希望还有人需要这个答案。 bootstrap.js 中有一个名为 resetScrollbar() 的函数，出于某种愚蠢的原因，开发人员决定将滚动条尺寸添加到主体的填充右侧。所以从技术上讲，如果您只是将右填充设置为空字符串，它将解决问题

【参考方案30】：

我尝试了很多事情，但对我来说只是小事。

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