.html
<div #mask class="shade" *ngIf="IsShowCover"></div>
<div #mainbox>
页面内容
...
</div>
.css
ion-content{
.shade{
position: absolute;
top: 0px;
left: 0%;
width: 100%;
background-color: black;
z-index:999;
opacity: 0.3;
}
}
.ts
//初始化
@ViewChild('mask', { static: false }) private mask: ElementRef;
@ViewChild('mainbox', { static: false }) private mainbox: ElementRef;
IsShowCover: boolean = false;
constructor(){
}
//调用方法
submit(){
let params = {
...
}
this.api.submitCulturalPerception(params).then(
(data: any) => {
console.log('data', data);
if (data.SUBMIT_STATUS == true) {
this.toast.createToast('提交成功', 2000);
setTimeout(() => {
//获取蒙层遮罩的高度
this.setMaskHeight();
}, 500);
this.IsShowCover = true;
}
},
error => {
console.log(error);
}
);
}
//获取页面内容高度赋值给蒙层遮罩的高度
private setMaskHeight() {
let hh = this.mainbox.nativeElement.offsetHeight;
this.mask.nativeElement.style.height = hh + 'px';
}