引导模态在关闭后不断向身体添加填充权

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

body { padding-right: 0 !important }

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

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

刚刚更改为

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

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

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

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

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

如果你更关心padding-right相关的事情，那么你可以这样做

j查询：

$('#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。您应该只能使用一个。

这是对我有用的：

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

轻松修复

添加此类

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

它是一个覆盖但有效

我正在加载默认的引导程序 3.3.0 CSS，并遇到了类似的问题。通过添加此 CSS 解决：

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

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

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

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

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

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

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

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

如果没有属性值，则会删除该属性。

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

它将使您的模态在滚动窗口仍在工作时显示。谢谢，希望这也对您有所帮助

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

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

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

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

而且，在必要时，只需隐藏loginModal模态。

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

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

您可以在此处获取有关引导模式事件的更多信息。

祝你好运。

如果主体溢出，Bootstrap 模型会在主体上添加填充。

在引导程序 3.3.6(我正在使用的版本(上，这是负责将该填充权添加到 body 元素的函数：https://github.com/twbs/bootstrap/blob/v3.3.6/dist/js/bootstrap.js#L1180

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

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

这为我解决了问题。

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

您可以使用 Bootstrap 的现有类通过向 body tag 添加 pe-0 来解决此问题.
这转化为

.pe-0 {
    padding-right: 0 !important;
}

因此，如果您可以访问 body 标签，则无需添加任何其他 CSS 或 javaScript。

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

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

j查询：

$("#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');
    });
  }

我现在这很旧，这里提供的所有解决方案都可能有效。我只是添加一些新的东西，以防可以帮助某人：我遇到了同样的问题，并注意到打开模态正在为我的侧边导航添加边距右边距(可能是从添加到正文的填充中获得的一种继承(。添加 {右边距：0 ！重要;}到我的侧导航做了这个伎俩。

正如@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((的函数，出于某种愚蠢的原因，开发人员决定将滚动条尺寸添加到正文的填充右侧。所以从技术上讲，如果你只是将右填充设置为空字符串，它将解决问题