顯示類似於警報的網格

我想顯示警報但在那裏我無法添加離子選擇，因此我創建了一個網格，並且需要在網頁的中心顯示網格，並且應禁用背景。顯示類似於警報的網格

<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; 
    }

此網格應該始終即使屏幕尺寸不同的中心。

來源

2017-08-03 Yokesh Varadhan

自從高度和寬度是固定的，你可以使用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%); 
}

來源

2017-08-03 12:43:29 vivekkupadhyay

添加父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>

來源

2017-08-03 12:45:48

顯示類似於警報的網格

回答

相關問題