我是用ionic3做的，直接上代码，分三个文件：

1.html

1.1页面写蒙版如下

<ion-content [ngClass]="{'content-mask':isMask}"><div *ngIf="isMask" id="mask" class="mask" (click)="clickOther()"><div class="mask-content"><img src="assets/imgs/test-search/search.png"><p click)="clickText()">悬浮框要写的内容在这儿呢~~~~</p><p class="mask-close" (click)="closeModel()">X</p></div></div>
</ion-content>

1.2在页面底部可以定义按钮显示蒙版

<ion-footer><ion-toolbar (click)="showModel()"><ion-title>点我就弹出蒙版了~~</ion-title></ion-toolbar>
</ion-footer>

2.css 页面样式例子如下

2.1 主要是.content-mask这个类，如注释所说，可禁止页面滚动和遮盖全屏

.content-mask{.scroll-content {overflow: hidden;//蒙版出现时禁止页面滚动z-index: 1000;//蒙版遮住整个手机屏幕（包括状态栏）}}

2.2下面为蒙版和悬浮框样式

 .mask{position: fixed;top: 0;left: 0;bottom: 0;background-color: rgba(9, 9, 9, 0.3);width: 100%;height: 100%;z-index: 1000;}.mask-content {position: relative;display: flex;justify-content: center;align-items: center;width: 80%;text-align: center;background: #ffffff;border-radius: 6px;margin: 60% auto;line-height: 50px;z-index: 10001;font-size: 2rem;img{width: 3rem;height: 3rem;}}.mask-close{position: absolute;margin: 0;top: -15px;right: -15px;width: 30px;height: 30px;background-color: rgba(243, 243, 243, 1);font-size: 2rem;border-radius: 15px;line-height: 30px;}

3.ts

3.1先定义变量，判断是否弹出，默认不弹出

isMask = false;

3.2点击底部按钮，调用showModel方法，弹出

   /*** 弹出悬浮框*/showModel() {this.isMask = true;document.getElementById('mask').style.display = 'block';}

3.3点击屏幕各个部分对应的方法如下

  /*** 关闭悬浮框*/closeModel() {console.log('点我悬浮框就要关闭了~~~');this.isMask = false;document.getElementById('mask').style.display = 'none';}/*** 点击悬浮框里面的内容*/clickText() {console.log('终于点到内容上了，你可以干你想干的事了，哈哈~~~');}/*** 点击页面的其他地方*/clickOther() {console.log('亲爱滴，您点到其他地方去了~~~');}

到此完美结束，如果用的过程有疑问，欢迎随时交流指点