Question

打开bootstrap模式后，自动填充权限：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");
            })
})

但它不起作用。

Answer 1

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

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

或者对于以前版本的Bootstrap：

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

有关详细信息，请查看此link

Answer 2

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

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

希望这可以帮助任何有同样问题的人。

Answer 3

我知道这是一个迟到的答案，但是如果让一个遇到相同问题的人使用Michael的解决方案，您可能会遇到第二个问题，他的解决方案对我有很大帮助，但是我面临第二个问题问题，当打开某些模态时，我只是对某些元素进行了奇怪的转换，在尝试了一些更改之后，我最终使用了：

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

打开模态时将保留填充，不存在填充时将其删除，这样不仅可以解决填充问题，还可以解决移位（可以但不总是这样），也可以保持“淡入淡出”类，也会引起一些问题。

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

3 个答案: