Question

当div位于md-tab控件内时，是否可以在全屏模式下打开div？我有plunkr快速查看，模态位于固定位置，顶部和左侧= 0，但它显示在选项卡内。

CSS：

.modal{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10;
}
.content-modal{
    position: relative;
    top: 20px;
    left: 20px;
    width: 80%;
    height: 80%;
    background-color: #fff;
    z-index: 10;
}

html：

<md-tab-group [dynamicHeight]="false">
  <md-tab label="first">
    <div class="modal" *ngIf="modal">
      <div class="content-modal">
        a<br>
        <button md-raised-button (click)="modal=false">close modal</button>
      </div>
    </div>
    <div class="normalContent">
      Content tab goes here...<br>
      <button md-raised-button (click)="modal=true">open modal</button>

    </div>
  </md-tab>
  <md-tab label="second"><div class="modal">b</div>
  here other content
  </md-tab>  
</md-tab-group>

Plnkr demo

提前致谢。

Answer 1

我稍微调整了你的标记。你必须将模态div放在md-tab之外才能获得全屏幕'面纱'模式。

 <md-tab-group [dynamicHeight]="false">
      <md-tab label="first">
        <div class="normalContent">
          Content tab goes here...<br>
          <button md-raised-button (click)="modal=true">open modal</button>
        </div>
      </md-tab>
      <md-tab label="second"><div class="modal">b</div>
           Here is an other content
      </md-tab>  
 </md-tab-group>
 <div class="modal" *ngIf="modal">
     <div class="content-modal">
        <button md-raised-button (click)="modal=false">close modal</button>
      </div>
 </div>

md-tab上的div或模态全屏

1 个答案: