Javascript 引导模态在关闭后继续向身体添加填充

我正在使用Bootstrap和Parse框架构建一个小型web应用程序。但是这些引导模式在关闭后一直在身体上添加填充物。如何解决这个问题

我试图将此代码放入我的javascript中：

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

但它不起作用。有人知道怎么解决这个问题吗？ 我的代码：

---

我正在使用bootstrap和Parse框架构建一个小型web应用程序。但是这些引导模式在关闭后一直在身体上添加填充物。如何解决这个问题？

如果你更关心的是

正确填充

相关的事情，那么你可以这样做

jQuery：

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

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

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

这将

addClass

添加到您的

body

中，然后使用此

CSS：

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

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

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

这将帮助您摆脱

右边的填充

但是如果您还担心隐藏
滚动
，那么您也必须添加以下内容：

CSS：

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

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

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

这是我的建议

请看一看，它会帮你解决问题。
这可能是引导模式的故障。从我的测试来看，问题似乎是
#adminPanel
正在初始化，而
#loginModal
尚未完全关闭。解决方法是通过删除
#adminPanel
和
#loginModal
上的
fade
类来删除动画，或者在调用
$（'#adminPanel'）.modal（）之前设置超时（~500ms）。希望这有帮助。
只需打开bootstrap.min.css

查找此行（默认）

并将其更改为

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

它将适用于现场的每种模式。你可以做溢出：自动；如果您想在打开模式对话框时保持滚动条的原样。
我刚刚使用了下面的css修复程序，它正在为我工作

body { padding-right: 0 !important }

只需从按钮中删除
数据目标
，然后使用jQuery加载模式

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

刚换成

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

我深入研究了引导javascript，发现模式代码在名为
adjustDialog（）
的函数中设置了正确的填充，该函数在模式原型上定义，并在jQuery上公开。将下面的代码放在某个地方以重写此函数而不执行任何操作，这对我来说是个好办法（尽管我还不知道不设置它的后果是什么！！）


$.fn.modal.Constructor.prototype.adjustDialog=function（）{}；
我刚刚删除了
淡入淡出
类，并使用
animation.css
更改了类淡入淡出效果。我希望这会有帮助。
这可以解决问题

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

我希望仍然有人需要这个答案。在bootstrap.js中有一个名为resetScrollbar（）的函数，出于某些愚蠢的原因，开发人员决定将滚动条尺寸添加到正文的右侧填充中。因此，从技术上讲，如果您只需将正确的填充设置为空字符串，它将解决此问题
我有很长一段时间遇到了相同的问题。这里的答案都不管用！但是下面的代码修复了它

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

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

关闭模式时会触发两个事件，首先是
隐藏.bs.modal
，然后是
隐藏.bs.modal
。您应该能够只使用一个。
简易修复

添加这个类

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

这是一个覆盖，但可以工作
我对Bootstrap 3.3.7和我的固定导航栏解决方案有同样的问题：将此样式添加到自定义css中

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

它将使您的模式显示，而滚动窗口仍在工作。
谢谢，希望这对您也有帮助
removeAttr无法像这样删除CSS属性：

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

如果没有属性值，该属性将被删除。
正如@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);

我尝试过很多事情，但都是为了我的小事情

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

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

我经常在打开模式时向主体添加一些CSS，在仍然使用它的网站中，bootstrap3

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

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

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

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

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

必要时，只需隐藏
loginModal
模式

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

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

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

您可以获得有关引导模式事件的更多信息

祝你好运。
这是一个引导错误，已在v4开发中修复：
在此之前，添加下面的CSS类应该会有所帮助

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

我在使用modals和ajax时也遇到了同样的问题。这是因为JS文件在第一个页面和ajax调用的页面中被引用了两次，所以当modal关闭时，它两次调用JS事件，默认情况下，添加了17px的填充权限。
引导模型在主体溢出时将填充权限添加到主体中

在bootstrap 3.3.6（我正在使用的版本）中，这是负责将填充添加到body元素的函数：

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

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

这为我解决了这个问题

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

为我工作。请注意，滚动条在主体中是强制的，但如果您有一个“滚动”页面，这并不重要（？）

试试这个

在模式关闭后，它将向车身添加右侧0px的衬垫。
这就是我的工作原理：

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

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

一个纯CSS解决方案，保持引导功能的原样