Question

我正在使用角度材料md对话框我面临的问题是背景与页面一起滚动。对于这个问题，我找到了一个解决方案，以保持md背景位置固定。它工作但另一个问题是在背景下滚动背景内容。
以下是笔的链接示例：

https://codepen.io/avreddy/pen/KZzORN?editors=1000

(function(angular, undefined){
  "use strict";

  angular
    .module('demoApp', ['ngMaterial'])
    .controller('EmployeeController', EmployeeEditor)
    .controller('GreetingController', GreetingController);

  // Fictitious Employee Editor to show how to use simple and complex dialogs.

  function EmployeeEditor($scope, $mdDialog) {
    var alert;

    $scope.showAlert = showAlert;
    $scope.closeAlert = closeAlert;
    $scope.showGreeting = showCustomGreeting;

    $scope.hasAlert = function() { return !!alert };
    $scope.userName = $scope.userName || 'Bobby';

    // Dialog #1 - Show simple alert dialog and cache
    // reference to dialog instance

    function showAlert() {
      alert = $mdDialog.alert()
        .title('Attention, ' + $scope.userName)
        .content('This is an example of how easy dialogs can be!')
        .ok('Close');

      $mdDialog
          .show( alert )
          .finally(function() {
            alert = undefined;
          });
    }

    // Close the specified dialog instance and resolve with 'finished' flag
    // Normally this is not needed, just use '$mdDialog.hide()' to close
    // the most recent dialog popup.

    function closeAlert() {
      $mdDialog.hide( alert, "finished" );
      alert = undefined;
    }

    // Dialog #2 - Demonstrate more complex dialogs construction and popup.

    function showCustomGreeting($event) {
        $mdDialog.show({
          targetEvent: $event,
          template:
            '<md-dialog>' +
            '  <md-content>Hello {{ employee }}!</md-content>' +
            '  <div class="md-actions">' +
            '    <md-button ng-click="closeDialog()">' +
            '      Close Greeting' +
            '    </md-button>' +
            '  </div>' +
            '</md-dialog>',
          controller: 'GreetingController',
          onComplete: afterShowAnimation,
          locals: { employee: $scope.userName }
        });

        // When the 'enter' animation finishes...

        function afterShowAnimation(scope, element, options) {
           // post-show code here: DOM element focus, etc.
        }
    }
  }

  // Greeting controller used with the more complex 'showCustomGreeting()' custom dialog

  function GreetingController($scope, $mdDialog, employee) {
    // Assigned from construction <code>locals</code> options...
    $scope.employee = employee;

    $scope.closeDialog = function() {
      // Easily hides most recent dialog shown...
      // no specific instance reference is needed.
      $mdDialog.hide();
    };
  }
  
})(angular);

body {
  padding:100px;
}
.md-button {
  margin-left:50px;
  text-transform: none;
  padding:10px;
  padding-left:15px;
  padding-right:15px;
  
}

.intro {
 
  padding-left:75px;
  width:520px;
}
md-backdrop{
  position: fixed !important;
}

<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
</head>
<body>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<!-- Angular Material Library -->
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
  <div  ng-app="demoApp" ng-controller="EmployeeController">
  <md-button ng-click="showAlert()" class="md-raised md-warn">
    Employee Alert!
  </md-button>
  <md-button ng-click="closeAlert()" ng-disabled="!hasAlert()" class="md-raised">
    Close Alert
  </md-button>
  <md-button class="md-raised md-primary" ng-click="showGreeting($event)">
    Greet Employee 
  </md-button>
</div>
<p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p>
<p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p><p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p><p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p><p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p><p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p><p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p><p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p><p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p><p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p><p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p><p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p><p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p><p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p><p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p><p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p><p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p><p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p><p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p><p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p><p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p><p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p><p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p><p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p><p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p><p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p><p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p><p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p><p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs
</p>
<br/>
<br/>

<div  ng-app="demoApp" ng-controller="EmployeeController">
  <md-button ng-click="showAlert()" class="md-raised md-warn">
    Employee Alert!
  </md-button>
  <md-button ng-click="closeAlert()" ng-disabled="!hasAlert()" class="md-raised">
    Close Alert
  </md-button>
  <md-button class="md-raised md-primary" ng-click="showGreeting($event)">
    Greet Employee 
  </md-button>
</div>    
  </body>

Answer 1

如果您可以将角度1.5.5和角度材质升级到1.1.5，则可以自动实现此目的。

您甚至可以设置parent属性以确定应该回放哪个区域。请检查https://material.angularjs.org/latest/demo/dialog

<强>更新如果你想要临时解决方案试试这个。在显示对话框之前，添加angular.element(document.querySelector('body')).attr('style', 'overflow-y: hidden');

并最终添加

angular.element(document.querySelector('body')).attr('style', 'overflow-y: auto');

showAlert函数的代码应如下所示。

function showAlert() {
      angular.element(document.querySelector('body')).attr('style', 'overflow-y: hidden');
      alert = $mdDialog.alert()
        .title('Attention, ' + $scope.userName)
        .content('This is an example of how easy dialogs can be!')
        .ok('Close');

      $mdDialog
          .show( alert )
          .finally(function() {
            angular.element(document.querySelector('body')).attr('style', 'overflow-y: auto');
          });
    }

Answer 2

您应该再次检查角度和角度材料的版本。我不知道它是怎么发生的，但是我的指数包括棱角1.4.1角度材料1.0.4。所以我的md对话框无法显示，屏幕也很暗。

如何在使用md对话框时禁用背景？

2 个答案: