Mat-在特定div上的对话框

Question

我正在使用angular 8和mat-dialog。现在，mat-dialog覆盖了整个页面，mat-dialog位于页面的中心，如下所示。

​

但是我希望mat-对话框只出现在div上，覆盖图也应该只出现在父div上，即mat-dialog应该是相对于父div的，如下图所示。该怎么做呢？此外，这是一个响应式的网页，因此，添加垫对话框和覆盖的位置是大量的工作，可能不会在不同的屏幕大小看起来很好。如果不能使用角度材料，请建议一些其他框架(bootstrap等)或其他方法。

​

。

Answer 1

您可以使用与MatDialogRef关联的updatePosition函数

this.dialogRef.updatePosition({ top: '25px', left: '25px', right:'25px', bottom:'25px' });

这将定位对话框。

Answer 2

您可以在主机div中创建一个position: absolute。

模板：

<div class="main">
  <button (click)="toggleDialog()"> toggle dialog </button>
  <div *ngIf="isOpen" class="dialog"> 
    <span>Window dialog</span>
  </div>
</div>

CSS：

.main {
  position: relative;
  height: 100vh;
}

.dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 300px;
  height: 200px;
  background-color: grey;

  display: flex;
  flex-direction: column;
  align-items: center;
}

TS：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  isOpen = false;

  toggleDialog() {
    this.isOpen = !this.isOpen;
  }
}

在这里试试：https://stackblitz.com/edit/angular-evpbay

Answer 3

请删除对话框覆盖。

.cdk-overlay-backdrop{display: none;}

在弹出窗口打开时创建您自己的覆盖。