Search code examples
angularjsangularjs-material

Disable the option to scroll outside the md-dialog in AngularJS

I have the following dialog configuration:

var position = this._mdPanel.newPanelPosition()
    .absolute()
    .center();

var config = {
    attachTo: angular.element(document.body),
    controller: PanelDialogCtrl,
    controllerAs: 'ctrl',
    disableParentScroll: this.disableParentScroll,
    templateUrl: 'tmp',
    hasBackdrop: true,
    panelClass: 'form-dialog',
    position: position,
    escapeToClose:true,
    trapFocus: true,
    clickOutsideToClose: false,
    focusOnOpen: true,
    locals:{ }
};

this._mdPanel.open(config);

But when I scroll outside the popup it is scrolled. I want the dialog fixed to the position without any movement or something outside.

setting hasBackdrop: false doesn't working.

Solution

  • If you want to disable scroll outside of your modal, set disableParentScroll option to true.

    $mdDialog.alert()
    .disableParentScroll(true)

    Demo