用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，不然会将弹窗一起遮住。
