引导模式删除滚动条

IT技术 javascript twitter-bootstrap modal-dialog
2021-02-23 20:15:08

当我在页面中触发模态视图时,它会触发滚动条消失。这是一个令人讨厌的效果,因为当模态移入/消失时背景页面开始移动。有没有治愈这种效果的方法?

6个回答

这是一个功能,当您显示模态时,类modal-open会被添加到 HTML 中body,并在您隐藏它时被移除。

这使得滚动条消失,因为引导 css 说

.modal-open {
    overflow: hidden;
}

您可以通过指定覆盖它

.modal-open {
    overflow: scroll;
}

你自己的css中。

添加了更多细节。现在好多了?
2021-04-21 20:15:08
完美,也适用于 angular-strap 模态,可以简单地将上述 CSS 包含在<style></style>内部,templateUrl这样它就不会影响应用程序中的其他模态。
2021-04-25 20:15:08
使用 overflow-y:scroll 更合适,我认为它更好地解决了 OP 问题的意图。使用 overflow:scroll 会在屏幕底部添加一个水平滚动条。
2021-04-27 20:15:08
使用溢出:继承;反而。这样当你有滚动时模态不会删除滚动,当你没有滚动时不要添加滚动
2021-05-05 20:15:08
你能更具体一点吗?
2021-05-10 20:15:08

我认为继承滚动更好,因为当你打开模态时,它总是会随着滚动而打开,但是当你没有任何滚动时,你会遇到同样的问题。所以我只是这样做:

.modal-open {
  overflow: inherit;
}
遇到了同样的问题,但是不得不将 CSS 应用于 .modal 类而不是 .modal-open
2021-05-01 20:15:08
这是真正的答案。在我的情况下,溢出滚动仍然影响某些元素。
2021-05-16 20:15:08

最好使用 overflow-y:scroll 并从正文中删除填充,引导模式向页面正文添加填充。

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

IE浏览器兼容: IE浏览器默认做同样的事情。

padding-right: 0 !important;确实很重要。在我的情况下,即使启用了滚动条,它也会在模式后面的原始页面中留下一个不可见的滚动条,并且仍然将页面向左移动,这正是我要删除的内容。非常感谢您的回答!
2021-04-26 20:15:08
谢谢。此外,如果模态弹出窗口需要滚动并且父级需要保持静止 .modal-body { max-height: calc(100vh - 210px); 溢出-y:自动;} .modal-open { 溢出:隐藏;溢出-y:滚动;padding-right: 0 !important; }
2021-05-05 20:15:08
像魅力一样工作。正如@YongPin 所说;当模态弹出时,它后面仍然显示一个不可见的滚动条。padding-right: 0固定它。
2021-05-18 20:15:08

我用了

.modal-open {
  overflow-y: scroll;
}

在这种情况下,您避免显示水平滚动条

我们可以将它与@Alisson Alvarenga 的答案结合起来,并使用 overflow-y: inherit;
2021-04-26 20:15:08

感谢上帝,我看到了这篇文章!我正在拉我的头发,试图弄清楚如何在使用我自己的关闭链接关闭窗口时恢复我的滚动条。我尝试了 CSS 的建议,但它无法正常工作。看完之后

当您显示模态时,类 modal-open 会被添加到 HTML 正文中,并在您隐藏它时被移除。-- @flup

我想出了一个使用 jquery 的解决方案,所以如果其他人有同样的问题并且上述建议不起作用 -

<script>
            jQuery(document).ready(function () {
jQuery('.closeit').click(function () {
 jQuery('body').removeClass('modal-open');
                });
            });
        </script>
我有一个问题,我覆盖了 hide.bs.modal 事件,所以我可以在隐藏模态时执行一些自定义代码,但我没有意识到这阻止了 modal-open 类从正文中删除 -因此,当关闭这个特定的模式时,我的滚动条没有回来。我没有在我的 hide.bs.modal 代码中手动删除 modal-open 类,它解决了这个问题。
2021-04-29 20:15:08
data-dismiss="modal" 在我的情况下不起作用,因为我正在调用角度控制器中的函数。建议的 jQuery 解决方案对我来说非常有效。
2021-04-29 20:15:08
您应该只需要向data-dismiss="modal"链接添加一个属性,而不是像这样自定义任何东西。单击该链接时,Bootstrap 将执行所有适当的关闭操作。
2021-05-20 20:15:08