覆盖不适用于自定义模式

Question

我正在打开一个单击锚标记的自定义对话框。对话框正在打开，但它正在页面顶部。叠加层无效。 如何实现这一点。我已导入MaterialModule，MdDialogModule并在导入中添加它们，我在我的decalartions数组中也添加了entryComponents：[ModalComponent]。 我添加了我的代码。请帮助

cardDetails component.ts

import { Component, OnInit,Inject } from '@angular/core';
import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
import {ModalComponent} from './modal/modal.component';

@Component({
  selector: 'app-cardDetails',
  templateUrl: './cardDetails.component.html',
  styleUrls: ['./cardDetails.component.css']
  })

  export class CardDetailsComponent implements OnInit {

  constructor(public dialog: MdDialog) { 



}



  ngOnInit() {


}
openDialog(): void {
    let dialogRef = this.dialog.open(ModalComponent, {
      width: '250px',

    });

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

}

cardeDetails component.html

<p id ="message">Don't know your IFSC Code? That's okay, <a (click)="openDialog()">Find out here!</a><br><br>

Model Component.ts

import { Component, OnInit ,Inject} from '@angular/core';
import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';

//import { ModalService } from './modal/modal.service';

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.css']
})
export class ModalComponent implements OnInit {

  constructor(
    public dialogRef: MdDialogRef<ModalComponent>,
    @Inject(MD_DIALOG_DATA) public data: any) { }

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

model component.html

<div class="container-fluid">
                <div class="row">
                    <div class="col-xs-12">
                    <div md-dialog-content>
    <h3>Find your IFSC Code</h3>
<div class="form-group">
  <label for="sel1"></label>
  <select class="form-control" id="sel1" name ="Bank Name">

  </select>
  <label for="sel2"></label>
  <select class="form-control" id="sel2" name ="City">

  </select>
  <label for="sel3"></label>
  <select class="form-control" id="sel3" name ="Branch">

  </select>
</div>

<div md-dialog-actions>
<button md-button (click)="onNoClick()" tabindex="-1">Cancel</button>
  <button md-button  tabindex="2">Confirm</button>

</div>
</div>
</div>
</div>
</div>