AngularUI模式-防止身体移动和滚动

I am using the latest versions of angularjs, angularui, jquery and bootstrap and have come across an issue. The body content shifts left and then right when an angularui modal is used. This can be seen at the angularui homepage for example.

我正在使用最新版本的angularjs、angularui、jquery和bootstrap，并遇到了一个问题。当使用angularui模式时，主体内容左右移动。这可以在angularui主页上看到。

I have read through this issue (https://github.com/twbs/bootstrap/issues/9855) and have tried to extend this solution (http://jsbin.com/oHiPIJi/8/edit) to the angularui modal case but it doesn't seem to work. My knowledge of jquery is pretty limited / minimal I'm afraid but I suspect that the bs.modal events are not triggered for angularui though I'm not sure.

我已经通读了这个问题(https://github.com/twbs/bootstrap/issues/9855)，并试图将这个解决方案(http://jsbin.com/oHiPIJi/8/edit)扩展到angularui模式情况，但它似乎不起作用。我对jquery的了解是有限的/最少的，但是我怀疑是错误的。对于angularui，模式事件不会被触发，尽管我不确定。

Any pointers on the right direction to solve this issue would be much appreciated! Thanks.

任何关于解决这个问题的正确方向的建议都将非常感谢!谢谢。

1 个解决方案

#1

The following may be of help:

以下可能有帮助:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<style>
  .modal-open {
  overflow: auto;
}
</style>

Overwrite class modal-open overflow to auto after the bootstrap css is loaded. Here is a plunker for you to check if this is the desired result: http://plnkr.co/edit/Jz6Pd08v7dkkdRUKg8FK?p=preview

在加载引导css之后，覆盖类modal-open overflow到auto。这里有一个用于检查这是否是您想要的结果的插入器:http://plnkr.co/edit/jz6pd08v7dkkdrukg8fk? ppreview。

You need to open the preview in a new window (Blue X on the top right). Resize the window to different widths to see if it works with scrollbar present or not. Tested this on Firefox. other browsers may have different results.

您需要在一个新的窗口中打开预览(右上角的蓝色X)。将窗口的大小调整为不同的宽度，以查看它是否与滚动条一起工作。测试这个Firefox。其他浏览器可能会有不同的结果。

#1