引导模式打开时如何防止滚动正文内容 [英] How to prevent scrolling of the body content when bootstrap modal is open

问题描述

我正在使用 Angular UI Bootstrap 模态框.当模态打开时，身体有一个滚动.当我滚动模态后面的内容时也会滚动.

I am using Angular UI Bootstrap Modal box. When the modal opens the body has a scroll. When I scroll the content behind the modal also scrolls.

我可以将 overflow: hidden 设置为 body 标签，这样就解决了这个问题.但是，如果我的模态中有很多内容，我需要一个滚动来显示.这个滚动不应该在模态内，即当我使用页面滚动时，模态应该只滚动而不是内容.Plunker 在这里

I can set overflow: hidden to the body tag and this solves the issue. However if I have alot of content within my modal I need a scroll to show. This scroll should not be inside the modal i.e When I use the page scroll the modal should only scroll and not the content. Plunker here

推荐答案

我实际上面临着同样的问题，使用 UI Bootstrap，并想出了一种解决方法.在打开模态时，向主体添加一个类 (.ovh)，将溢出设置为隐藏.在关闭/关闭模态时，您删除该类，以便再次滚动.

I'm facing the very same problem actually, using UI Bootstrap, and came up with kind of a workaround. On opening the modal, you add a class (.ovh) to the body, that sets overflow to hidden. On closing/dismissing the modal, you remove that class, so that scrolling is possible again.

在此处查看我的小提琴分支:http://plnkr.co/edit/OIJ2ee5Ph0ELgkKPrSbr?p=预览

See my fork of your fiddle here: http://plnkr.co/edit/OIJ2ee5Ph0ELgkKPrSbr?p=preview

注意，我将类放在 index.html 中，仅用于演示目的.此外，我在控制器定义中注入了 $document，以使用 angular 提供的引用.

Note that I've placed the class in the index.html, just for demonstration purposes. Besides I injected $document in the controller definition, to use the reference provided by angular.

这篇关于引导模式打开时如何防止滚动正文内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！