logo标签列表

Bootstrap 模态框移除滚动条

javascripttwitter-bootstrapmodal-dialog
114

当我在页面中触发模态视图时，它会导致滚动条消失。 这是一个令人讨厌的效果，因为当模态视图移动/消失时，背景页面开始移动。 有没有办法解决这个问题？

1
浏览器兼容性答案：https://dev59.com/jV8f5IYBdhLWcg3wEPIq#47807685 - Billu
15个回答
0

为了让PrimeNg用户能够在这里得到帮助，PrimeNg也做了同样的事情：

.p-overflow-hidden {
    overflow: hidden;
}

在PrimeNg的情况下，可以通过禁用modal属性来关闭DynamicDialog，如果这符合您的使用情况。否则，它需要与Bootstrap相同的修复。
0
我在Bootstrap 5中遇到了这个问题，只需将overflow-y-scroll类添加到body即可解决。
0

我自己也遇到了这个问题，很快找到了这个问题，帮助我理解了是什么原因导致了这种行为。所以谢谢。

然而，我觉得这些CSS解决方法有点不太优雅。除非你特别想保留滚动条（虽然我想不出为什么要这样做）。

基本上，Bootstrap会对某些元素应用padding-right来补偿移除滚动条的影响。

因此，你只需要在有问题的元素周围加一个额外的零padding-right的包装器（并将被定位的类移到它上面）。

即从这个...

<div class="fixed-top p-1 bg-dark">
    ...this content will move as padding will be modified...
</div>

...变成这样...

<div class="fixed-top p-0 bg-dark">
    <div class="p-1">
        ...this content won't move...
    </div>
</div>
0

这可能是由于第一个模态框（关闭时）从body元素中删除了modal-open类，而第二个模态框在触发modal-open时不会将其添加回来。

在这种情况下，我会使用事件来检查模态框是否已完全关闭/隐藏并打开另一个模态框。

let modal1 = $('.modal1);
let modal2 = $('.modal2);
$modal1.on('hidden.bs.modal', function (e) {
   $modal2.modal('show');
});

这会等待第一个模态框关闭，以确保从 body 中移除 modal-open，然后在打开时重新添加它。

-1
在我的情况下，Bootstrap 通过打开模态框为我的侧边栏元素添加了 margin-left: -17px。我的解决方案是为侧边栏添加 m-0 类。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接