ionic5自定义弹窗并点击空白处能关闭

用div自定义一个弹窗。

 <!-- 弹窗 -->
    <div class="ml-popover-class" *ngIf="popoverShow">
        <ng-container *ngFor="let item of componentData.rButton.key; last as l">
            <div class="ml-text" (click)="titleClick(item)">{{item.value}}</div>
            <div *ngIf="!l" class="ml-line"></div>
        </ng-container>
    </div>

弹窗样式参考：

.ml-popover-class {
    // 整个弹窗的样式
    background: #ffffff;
    border-radius: .3rem /* 3/10 */;
    width: 6.8rem;
    height: auto;
    top: 4.2rem /* 42/10 */;
    right: .384rem /* 3.84/10 */;
    position: absolute;
    z-index: 99999;
    text-align: center;
    box-shadow: 0px 1px .4rem 0px rgba(0, 0, 0, 0.11);
}

以上已经实现了自定义弹窗，可以通过样式中的 top， right属性控制弹窗的位置，通过box-shadow设置阴影。
但是会有一个问题：点击空白处无法关闭这个弹窗。

利用遮罩层来控制弹窗的关闭。

转换一下思路，弹窗出现的时候，添加一个全屏的遮罩层，这样用户点击非弹窗区域（也就是空白区域）时，我们可以通过出发遮罩层的点击事件来关闭弹窗。

首先用div写一个遮罩层：

<!--遮罩层-->
<div class="ml-shade" *ngIf="popoverShow" (click)="goShow()"></div>

很简单，这个div与弹窗同层即可。没有其他内容。ngIf控制其出现时机，和弹窗一起出现。goShow则是点击事件，用来关闭弹窗和遮罩层的。重点是这个ml-shade遮罩层样式。

// 遮罩层 样式
.ml-shade{
    position: absolute; 
    top: 0%; 
    left: 0%; 
    width: 100%; 
    height: 100%; 
    background-color: black; 
    z-index:999; 
    -moz-opacity: 0.26; 
    opacity:.26; 
    filter: alpha(opacity=26);
}

以上全部写下来，即可达到点击空白处关闭弹窗的效果。

需要注意的是 z-index这个属性。遮罩层的 z-index要小于弹窗样式里的 z-index，不然会将弹窗一起遮住。