ionic3 添加蒙版，彈出懸浮框

 

我是用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('親愛滴，您點到其餘地方去了~~~');
   }

到此完美結束，若是用的過程有疑問，歡迎隨時交流指點