diff --git a/src/components/dialog/dialog.js b/src/components/dialog/dialog.js
index d16eb6fae43..d4562c46250 100644
--- a/src/components/dialog/dialog.js
+++ b/src/components/dialog/dialog.js
@@ -203,6 +203,8 @@ function MdDialogDirective($$rAF, $mdTheming) {
* - `targetEvent` - `{DOMClickEvent=}`: A click's event object. When passed in as an option,
* the location of the click will be used as the starting point for the opening animation
* of the the dialog.
+ * - `disableParentScroll` - `{boolean=}`: Whether to disable scrolling while the dialog is open.
+ * Default true.
* - `hasBackdrop` - `{boolean=}`: Whether there should be an opaque backdrop behind the dialog.
* Default true.
* - `clickOutsideToClose` - `{boolean=}`: Whether the user can click outside the dialog to
@@ -254,7 +256,7 @@ function MdDialogProvider($$interimElementProvider) {
return $$interimElementProvider('$mdDialog')
.setDefaults({
- methods: ['hasBackdrop', 'clickOutsideToClose', 'escapeToClose', 'targetEvent'],
+ methods: ['disableParentScroll', 'hasBackdrop', 'clickOutsideToClose', 'escapeToClose', 'targetEvent'],
options: dialogDefaultOptions
})
.addPreset('alert', {
@@ -309,11 +311,13 @@ function MdDialogProvider($$interimElementProvider) {
clickOutsideToClose: true,
escapeToClose: true,
targetEvent: null,
+ disableParentScroll: true,
transformTemplate: function(template) {
return '
' + template + '
';
}
};
+
// On show method for dialogs
function onShow(scope, element, options) {
// Incase the user provides a raw dom element, always wrap it in jqLite
@@ -330,6 +334,11 @@ function MdDialogProvider($$interimElementProvider) {
$animate.enter(options.backdrop, options.parent);
}
+ if (options.disableParentScroll) {
+ options.oldOverflowStyle = options.parent.css('overflow');
+ options.parent.css('overflow', 'hidden');
+ }
+
return dialogPopIn(
element,
options.parent,
@@ -377,6 +386,10 @@ function MdDialogProvider($$interimElementProvider) {
if (options.backdrop) {
$animate.leave(options.backdrop);
}
+ if (options.disableParentScroll) {
+ options.parent.css('overflow', options.oldOverflowStyle);
+ $document[0].removeEventListener('scroll', options.captureScroll, true);
+ }
if (options.escapeToClose) {
$rootElement.off('keyup', options.rootElementKeyupCallback);
}
diff --git a/src/components/dialog/dialog.spec.js b/src/components/dialog/dialog.spec.js
index b35ec321652..d000bc0459b 100644
--- a/src/components/dialog/dialog.spec.js
+++ b/src/components/dialog/dialog.spec.js
@@ -237,6 +237,19 @@ describe('$mdDialog', function() {
expect(parent[0].querySelectorAll('md-dialog').length).toBe(1);
}));
+ it('should disableParentScroll == true', inject(function($mdDialog, $animate, $rootScope) {
+ var parent = angular.element('');
+ $mdDialog.show({
+ template: '
',
+ parent: parent,
+ disableParentScroll: true
+ });
+ $rootScope.$apply();
+ $animate.triggerCallbacks();
+ $rootScope.$apply();
+ expect(parent.css('overflow')).toBe('hidden');
+ }));
+
it('should hasBackdrop == true', inject(function($mdDialog, $animate, $rootScope) {
var parent = angular.element('');
$mdDialog.show({