Как изменить положение модального диалогового окна? - PullRequest
Новая
       12

Как изменить положение модального диалогового окна?

0 голосов
/ 13 июня 2018

Я работаю над проектом Angular 4 и создал модальное диалоговое окно с использованием материала Angular.Но диалоговое окно появляется в левой нижней части страницы.Как я могу разместить модальное диалоговое окно в середине страницы.

Это метод открытого диалога.Я вызвал метод openDialog () в другом методе. 

openDialog() {

let dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
  panelClass: 'my-centered-dialog',
  width: '450px',
  height: '250px',
});

dialogRef.afterClosed().subscribe(result => {
  console.log('The dialog was closed');
});
}

Это класс DialogOverviewExampleDialog. 

@Component({
  selector: 'dialog-overview-example-dialog',
  templateUrl: 'dialog-overview-example-dialog.html',
})
export class DialogOverviewExampleDialog {

  constructor(
    public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
    @Inject(MAT_DIALOG_DATA) public data: any) { }

  onNoClick(): void {
    this.dialogRef.close();
  }

}

1 Ответ

0 голосов
/ 13 июня 2018

Вы можете установить положение диалога, передав position в конфигурации как: 

let dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
  panelClass: 'my-centered-dialog',
  width: '450px',
  height: '250px',
  position: {top: '20px'}
});

Здесь Вы можете найти больше информации относительно position

Такжеесли вы не пройдете позицию, она будет центрирована по экрану.Возможно, вы переопределяете любой стиль в классе my-centered-dialog.Просто попробуйте удалить это panelClass

...