I am using angular material md dialog box on problem I am facing is backdrop is scrolling along with page. For that issue i have found a solution somewhere to keep md-backdrop position to fixed. It worked but another issue is background content scrolling under the backdrop.
Here is the link for pen with example:
https://codepen.io/avreddy/pen/KZzORN?editors=1000
我正在使用角材质md对话框的问题，我所面对的是背景是滚动沿页。对于这个问题，我已经找到了一个解决方案来保持md- background的位置不变。它起了作用，但另一个问题是背景内容在背景下滚动。这里是pen的链接，示例如下:https://codepen.io/avreddy/pen/kzzorn?
(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>2 个解决方案
#1
2
If you are okay with upgrading to angular 1.5.5 and angular material to 1.1.5, you can achieve this automatically.
如果你可以升级到1.5.5角和1.1.5角材质，你可以自动实现。
You can even set parent property to make which area should be back-dropped. Please check https://material.angularjs.org/latest/demo/dialog
您甚至可以设置父属性，以确定应该向后删除哪个区域。请检查https://material.angularjs.org/latest/demo/dialog
UPDATES If you want temporary solution try this. before showing dialog, add angular.element(document.querySelector('body')).attr('style', 'overflow-y: hidden');
如果需要临时解决方案，请尝试更新。在显示对话框之前，添加angular.element(document.querySelector('body'))。attr(“风格”,“overflow-y:隐藏”);
and in finally add
并在最后添加
angular.element(document.querySelector('body')).attr('style', 'overflow-y: auto');
angular.element(document.querySelector(身体))。attr(“风格”,“overflow-y:汽车”);
Your code for showAlert function should look like this.
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');
});
}
#2
0
You should check again version angular and angular material. I didn't know how it happened but my index included angular 1.4.1 with angular material 1.0.4. So my md dialog cannot show and screen is dark.
你应该再次检查版本的角度和材质。我不知道它是怎么发生的，但我的指数包括角1。4.1和角材料1。4。所以我的md对话框不能显示，屏幕是暗的。
#1
2
If you are okay with upgrading to angular 1.5.5 and angular material to 1.1.5, you can achieve this automatically.
如果你可以升级到1.5.5角和1.1.5角材质，你可以自动实现。
You can even set parent property to make which area should be back-dropped. Please check https://material.angularjs.org/latest/demo/dialog
您甚至可以设置父属性，以确定应该向后删除哪个区域。请检查https://material.angularjs.org/latest/demo/dialog
UPDATES If you want temporary solution try this. before showing dialog, add angular.element(document.querySelector('body')).attr('style', 'overflow-y: hidden');
如果需要临时解决方案，请尝试更新。在显示对话框之前，添加angular.element(document.querySelector('body'))。attr(“风格”,“overflow-y:隐藏”);
and in finally add
并在最后添加
angular.element(document.querySelector('body')).attr('style', 'overflow-y: auto');
angular.element(document.querySelector(身体))。attr(“风格”,“overflow-y:汽车”);
Your code for showAlert function should look like this.
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');
});
}
#2
0
You should check again version angular and angular material. I didn't know how it happened but my index included angular 1.4.1 with angular material 1.0.4. So my md dialog cannot show and screen is dark.
你应该再次检查版本的角度和材质。我不知道它是怎么发生的，但我的指数包括角1。4.1和角材料1。4。所以我的md对话框不能显示，屏幕是暗的。