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

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'}
});

在这里，您可以找到有关position

的更多信息此外，如果您不传递位置，它将居中到屏幕。可能你正在覆盖my-centered-dialog类中的任何风格。只需尝试删除此panelClass