1、自定義遮罩層步驟

1.1先建立一個展示框，在遮罩層之上

<div class="aboutPage-isShowDiv" *ngIf="isShow">
    <h1>放內容</h1>        
</div>

1.2根據alert或者其他元件的樣式，抽取ion-backdrop標籤出來使用

<div *ngIf="isShow" class="backdrop-div" (click)="backdropclick($event)" ontouchmove="event.preventDefault();event.stopPropagation();"
 
>
    <ion-backdrop disable-activated role="presentation" tappable style="opacity: 0.5; transition-delay: initial; transition-property: none;"></ion-backdrop>
</div>

併為元件新增點選事件（阻止冒泡）

//遮擋層點選事件
    backdropclick(e){
        //判斷點選的是否為遮罩層，是的話隱藏遮罩層
        if(e.srcElement.className != 'itemClass'
 
){
            this.isShow = false;
        }
        //隱藏滾動條
        this.hiddenscroll();
        e.stopPropagation();
    }

併為遮罩層新增觸控事件（阻止冒泡、阻止預設事件 ontouchmove=”event.preventDefault();event.stopPropagation();”）

到此，就完成了Ionic2自定義的遮罩層

2.注意事項

2.1在ios手機上遮罩層能滑動

解決方法：為遮罩層新增觸控事件，阻止預設事件，阻止冒泡，另外如果樣式有些出入的話，還需要微調一下。

2.2ios上彈出框上有滑動的列表的話，也會帶動底層的列表滑動

解決方法： 除了給遮罩層新增觸控事件外，還需在彈出框展示的時候隱藏滾動條（設定overflow=’hidden’），恢復時恢復滾動條即可

<ion-content id="aboutContent">
</ion-content>

//彈出下拉框時，取消scroll
hiddenscroll(){
    //獲取當前元件的ID
    let aboutContent = document.querySelector("#aboutContent");
    //獲取當前元件下的scroll-content元素
    let scroll:any = aboutContent.querySelector(".scroll-content");
    if(this.isShow){
        scroll.style.overflow='hidden';
    }else {
        scroll.style.overflow='';
    }
}