如何$主体内容的对$ pvent滚动时引导模式是开放的 [英] How to prevent scrolling of the body content when bootstrap modal is open

问题描述

我使用的角度UI引导模式对话框。当打开模态身体有一个滚动。当我滚动模式后面的内容也滚动。

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.

我可以设置溢出：隐藏身体标记，这解决了问题。但是，如果我有很多我的模式中的内容，我需要一个滚动显示。这种滚动不应该是模态即内当我使用的页面滚动模式只能滚动，而不是内容。 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

推荐答案

我其实面临非常相同的问题，使用的用户界面引导，并用一种​​变通方法的走了过来。在打开的模式，你添加一个类（ .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.

请参阅我的提琴在这里的叉：<一href=\"http://plnkr.co/edit/OIJ2ee5Ph0ELgkKPrSbr?p=$p$pview\">http://plnkr.co/edit/OIJ2ee5Ph0ELgkKPrSbr?p=$p$pview

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

注意，我已经放在类中的index.html，只是为了演示的目的。此外，我在控制器中定义注入 $文件，使用由角提供的参考。

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.

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