ionic3 添加蒙版，弹出悬浮框

最新推荐文章于 2021-08-16 17:35:12 发布

转载最新推荐文章于 2021-08-16 17:35:12 发布 · 546 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/2365397/blog/1359411

文章标签：

#javascript #ViewUI

本文介绍如何使用 Ionic 3 构建一个带有悬浮框的蒙版效果。通过 HTML、CSS 和 TypeScript 的结合使用，实现了蒙版的显示与隐藏、页面滚动禁用等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

我是用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('亲爱滴，您点到其他地方去了~~~');
   }

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

转载于:https://my.oschina.net/u/2365397/blog/1359411