Question

我正在开发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();
  }

}

Answer 1

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

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

Here您可以找到有关position

的更多信息

此外，如果您没有通过位置，它将以屏幕为中心。可能你会覆盖my-centered-dialog课程中的任何风格。只需尝试删除此panelClass

即可

如何更改模态对话框的位置？

1 个答案: