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

Question

我正在使用 angular material md 对话框，我遇到的问题是背景随页面一起滚动。对于那个问题，我在某个地方找到了一个解决方案来保持 md-backdrop 位置固定。它有效，但另一个问题是背景内容在背景下滚动。
这是笔的 link 示例：

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

如果您可以升级到 angular 1.5.5 和 angular material 到 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

您应该再次检查版本 angular 和 angular material。我不知道它是怎么发生的，但我的索引包括 angular 1.4.1 和 angular material 1.0.4。所以我的 md 对话框无法显示并且屏幕很暗。

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

how to disable background while using md dialog?

html

css

angularjs

mddialog