打开模态后，Bootstrap body 自动填充删除答案

【问题标题】：Bootstrap body auto padding remove after open modal打开模态后，Bootstrap body 自动填充删除
【发布时间】：2015-07-08 04:24:56
【问题描述】：

打开引导模式后，自动填充右：19px 添加正文标记。我想删除这个自动填充。我已经尝试了以下模态代码并删除了正文自动填充。

<div class="media" data-toggle="modal" data-target="#kolpochitro"> 
             --------
</div>

那我写了

<div class="modal fade" id="kolpochitro" role="dialog">
    <div class="modal-dialog modal-sm" >

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
              -------
        </div>
        <div class="modal-body">
              ------
        </div>
      </div>

    </div>
  </div>

打开模态后我的身体标签在看萤火虫

<body class="cbp-spmenu-push modal-open" style="padding-right: 19px;">

为了删除这种风格，我正在尝试下面的代码

$('document').ready(function(){
            $('.media').click(function(){
                $("body").removeAttr("style");
            })
})

但它不起作用。

【问题讨论】：

为我工作：stackoverflow.com/a/65027287/7186739

标签： jquery twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

我遇到了同样的问题。在接受的答案中使用 Javascript 删除内联样式将删除填充，但直到模态完全显示，所以它仍然会导致一种不稳定的行为。最后，我用 CSS 移除了填充，这将确保页面内容不会移动并且始终没有填充。

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

希望这对有同样问题的人有所帮助。

【讨论】：

【解决方案2】：

使用显示的功能进行更新：

$('#modal-content').on('shown.bs.modal', function() {
       $("body.modal-open").removeAttr("style");
 });

或者对于以前版本的 Bootstrap：

$('#modal-content').on('shown', function() {
        $("body.modal-open").removeAttr("style");
})

更多信息请查看link

【讨论】：

我试过 $('#kolpochitro').on('shown.bs.modal', function() { $("body.modal-open").removeAttr( "风格"); });

【解决方案3】：

我知道这是一个迟到的答案，但只是为了让遇到同样问题的人，如果你只使用迈克尔的解决方案，你可能会面临第二个问题，他的解决方案对我有很大帮助，但我面临第二个问题问题，当一些模态被打开时，我只是在一些元素上发生了奇怪的变化，在尝试了一些改变之后，我最终使用了：

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

您将在打开模式时保留填充，并在不存在时删除填充，这样您不仅可以解决填充问题，还可以解决移位（您可以得到这个，但并非总是如此），您也可以保留“fade”类，也会引起一些问题。

【讨论】：