アラートに似たグリッドを表示

Question

私は警告を表示しようとしていますが、イオン選択を追加できないため、グリッドを作成しました。そのグリッドをページの中央に表示し、背景を無効にする必要があります。

<ion-grid class="showmodal" *ngIf="showNews" style=" background:white; width:50%; height:60%"> 
    <ion-row> 
    </ion-row> 
</ion-grid> 

私は可能なCSSを試してみましたが、私は、グリッドを得ることができていますが、このグリッドは、画面サイズが異なっていても中央に常にあるべき

.showmodal{ 
     position: fixed; 
     top: 0; 
     height: 100%; 
     width: 100%; 
     background: rgba(23, 22, 22, 0.8); 
     z-index: 10; 
     left: 0px; 
    } 

を中心ことはないだろう。

Answer 1

その高さと幅は、あなたのようにCSSを使用することができます固定されているので：

.showmodal { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    margin-left: auto; 
    margin-right: auto; 
    -webkit-transform: translateY(-50%); 
    -moz-transform: translateY(-50%); 
    transform: translateY(-50%); 
} 

Answer 2

は、親のdivを追加し、それに応じてスタイリングを追加します。

.showmodal{ 
 
height: 100px; 
 
color: white; 
 
width: 100px; 
 
background: steelblue; 
 
margin: 0 auto; 
 
    margin-top: 15%; 
 
} 
 
.parent{ 
 
position: fixed; 
 
top: 0; 
 
z-index: 10; 
 
left: 0px; 
 
width: 100%; 
 
height: 100%; 
 
background: rgba(23, 22, 22, 0.8); 
 
}

<div class="parent" ><div class="showmodal" > content </div> </div>