时间戳

首页 > 解决方案 > angularjs中的警报对话框导致页面滚动到顶部

css - angularjs中的警报对话框导致页面滚动到顶部

问题描述

我想在我的 angularjs 应用程序中使用一个警报对话框，而不是现在所有的$window.alert。在我的应用程序的每个控制器中，我都插入了这个（https://material.angularjs.org/latest/demo/dialog）：

$scope.showAlert = function(ev) {
 $mdDialog.show(
  $mdDialog.alert()
    .parent(angular.element(document.body))
    .clickOutsideToClose(true)
    .title('This is an alert title')
    .textContent('You can specify some description text in here.')
    .ariaLabel('Alert Dialog Demo')
    .ok('Got it!')
    .targetEvent(ev)
);};

在我的 style.css 文件中我添加了这个：

.md-dialog-is-showing {
    top: 0 !important;
}

问题是，当调用 $scope.showAlert 时，模式对话框下的页面会滚动到顶部，而当我关闭对话框时，它会返回到先前的位置。如何防止滚动到顶部以在调用它的相同位置显示对话框？

---------- 已编辑 ----------

我试图删除添加的 css 规则，但没有出现整个网页，包括对话框。我注意到在正文标签中，自动生成的样式如下（顶部：-1505px 导致问题）

<body ng-app="configuratorApp" class="ng-scope md-dialog-is-showing" style="position: fixed; width: 100%; top: -1505px; overflow: hidden;">

<md-backdrop class="md-dialog-backdrop md-opaque ng-scope" style="height: 2059px; position: fixed;" aria-hidden="true"></md-backdrop> ...

标签： cssangularjs

解决方案

推荐阅读