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

我正在使用 Angular Material md 对话框来解决我面临的问题是背景随页面滚动。对于这个问题，我在某处找到了一个解决方案来保持 md-backdrop 位置固定。它有效，但另一个问题是背景内容在背景下滚动。
以下是笔的链接示例:

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>

最佳答案

如果您愿意升级到 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');
          });
    }

关于html - 如何在使用 md 对话框时禁用背景？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47901210/

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

上一篇：javascript - AJAX 通过 Jquery 发布到 PHP

下一篇：html - 为什么我的 XPath 不能处理混合内容？