Question

场景是，当我点击页面上的按钮时，模式窗口在屏幕顶部打开。背景屏幕可以滚动，模态窗口也可以滚动。因此，当您单击模态窗口时，模态窗口将获得焦点，因此您可以滚动模态窗口。但是，当您单击模态窗口外部时，背景屏幕将获得焦点，因此背景将滚动。这不是我想要看到的。我们知道当我们在angularjs中使用模态窗口时，我们应该注入 $ uibModal ，如下所示：

 var modalInstance = $uibModal.open({
        animation: true,
        templateUrl: 'templates/share.html',
        controller: 'shareCtrl',
        size: 'sm',
        windowClass: 'window-class',
        backdrop: true,
        resolve: {

        }
});

窗口类非常简单，请参阅以下内容：

.window-class {
    -webkit-transition: opacity .15s linear;
}

当我们将背景设置为 true 时，它不会禁止背景滚动。有什么方法可以在显示模态窗口时禁止背景屏幕滚动吗？

Answer 1

当模态打开时，Bootstrap会向modal-open元素添加一个类<body>。您可以通过设置这个简单的css来阻止身体的溢出滚动：

.modal-open {
  overflow: hidden;
}

Angularjs ui bootstrap modal：当模态窗口打开时如何禁止背景滚动？

1 个答案: