angular - 如何改变模态对话框的位置？

Question

我正在从事 Angular 4 项目，我已经使用 Angular Material 创建了一个模态对话框。但是对话框出现在页面的左侧底部。如何将模态对话框放在页面中间。

这是打开对话框的方法。我在另一个方法中调用了 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();
  }

}

Answer 1

您可以通过在配置中传递 position 来设置对话框的位置:

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

Here您可以找到有关 position

的更多信息

此外，如果您不传递 position，它将以屏幕为中心。可能您正在覆盖 my-centered-dialog 类中的任何样式。只需尝试删除此 panelClass