Angularstrap Modal隐藏垂直浏览器滚动条

时间:2014-09-17 05:56:08

标签: css angularjs angular-strap

我正在测试角带的模态窗口,发生了不必要的事情。在模式可见的大型文档中,浏览器滚动条消失。然后,当您关闭模态时,将再次显示浏览器滚动条,文档会稍微折叠。

我一小时看着开发者工具,但我找不到原因。

文档崩溃时很烦人。

如何阻止滚动条隐藏?

HTML

<button data-animation="am-fade-and-scale" bs-modal="modal">
  Open Modal
</button>

控制器

var app = angular.module('Test', ['ngAnimate', 'mgcrea.ngStrap']);

app.controller('ModalCtrl', 
  function($scope){
    $scope.modal = {
      "title" : "ModalTitle",
      "content" : "Modal content"
    };
})

http://plnkr.co/edit/yKZSnn?p=preview

在Windows 8.1上测试

      Chrome 36, Firefox 31, Opera 24 - Same results.
      Safari 5.1.7 - Worst results, the overlayer still visible.

2 个答案:

答案 0 :(得分:8)

对于模态,溢出设置为隐藏。

您可以将body的溢出设置为auto来解决问题。

<body ng-controller="ModalCtrl" style="overflow: auto">

http://plnkr.co/edit/DGb38NBp89Fl4Jhvvyx3?p=preview

的工作演示

答案 1 :(得分:0)

当模态页面打开时,angular-modal-service会向您的body标签添加“modal-open”类。它还添加了padding-right:15px到body标签。

我的解决方案如下。将此添加到您的CSS中,在模态打开/模态关闭期间页面将不再调整大小。

body.modal-open {
    padding-right: 0 !important;
}