Question

我有一个以引导模态形式实现的角度材料2日期选择器：

<div class="modal-dialog modal-lg">
  <div class="modal-content">
    <div class="modal-header">
      <h4 class="modal-title">{{title}}</h4>
    </div>
    <div class="modal-body"> 
        <div class="timeline-cal">
            <input class="date-field" [mdDatepicker]="picker" placeholder="Choose a date">
            <md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle>
            <md-datepicker #picker></md-datepicker>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn grey-btn pull-right"     (click)="cancel()">Cancel</button>
        </div>
    </div>
</div>

但是，单击按钮后，日期选择器不会在模态对话框中打开，而是在后台打开。我尝试了这个，但没有帮助：

.mat-datepicker-content{    z-index: 1200}

Answer 1

试，

::ng-deep .cdk-overlay-container {
  z-index: 1200 !important;
}

或者这个

/deep/ .cdk-overlay-container {
  z-index: 1200 !important;
}

Answer 2

这对我来说很有效：

::ng-deep .cdk-overlay-container {
    position: fixed !important;
    z-index: 100000 !important; /* set value you need */
}

您必须为z-index指定特定位置。

注意：z-index仅适用于定位的元素（position：absolute，位置：相对，或位置：固定）。 CSS z-index @ W3Schools

Answer 3

在组件 html 文件中添加此代码：

<style>
  ::ng-deep .cdk-overlay-container {
    z-index: 2000;
</style>

希望这能完全解决问题！！！

角度材料datepicker在模态对话框中不会打开

3 个答案: