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({