文档章节

ionic3 添加蒙版,弹出悬浮框

小黑202
 小黑202
发布于 2017/07/13 19:01
字数 436
阅读 431
收藏 0

 

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

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

© 著作权归作者所有

小黑202
粉丝 7
博文 156
码字总数 41238
作品 0
西安
程序员
私信 提问
【BUG】【微信端】【正式环境1.0】bug清单,需要开发确认

微信端(正式1.0)现场议程 404 微信端(正式1.0)现场弹幕关闭之后无法开启 微信端(正式1.0)- 进现场 - 照片 - 添加一张图片,然后赞一下,切换到现场,然后切换到照片,取消赞,然后再赞...

Joiningss
2016/05/05
3
4
ionic3 创建 ionic1项目

简介 可能你和我一样觉得降级太麻烦,而且老是报错,这篇文章就介绍一下在 ionic3 下创建 ionic1 项目的方法 正常创建ionic项目 如果你打开了这篇文章,意味着你起码已经知道正常创建ionic项...

邪人君子
2018/01/07
0
0
echarts如何将tooltip的Hover事件改为点击事件

我如何才能把鼠标悬浮弹出tooltip提示框改为鼠标点击弹出tooltip提示框。

冥羽
2015/06/30
24.2K
8
原创C# Winform+DevExpress皮肤框架

基于热门C#语言研发的Winform皮肤框架,国内比较成熟的有C/S框架网四大快速开发框架产品,分别是标准版CSFramework V2.x、高级版CSFramework V3.x、企业版CSFramework V4.x、旗舰版CSFramewo...

孙中吕
01/14
0
0
不用写代码,30秒抓取李笑来所有微博

不知道大家发现没,《得到》专栏的导师,李笑来、万维钢、古典等,在专栏的分享中,都曾讲过这么一个道理——“最有效的学习方法就是教别人”。 如果我们学到某些知识,能清楚的讲给别人听;...

100个俯卧撑
2017/12/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

个人服务容器化和监控集成

1.前景 自己比较喜欢玩机器,目前手上有4台常用的机器如下,平常跑一些自己写的小程序还有博客和代理都在上面。 asw 1核1G 阿里云 1核2G 腾讯云 1核1G 百度云 2核4G 每次拿到一台新的vps环境...

MrPei
21分钟前
4
0
Rancher源码编译

源码包准备 mkdir -p $GOPATH/src/github.com/ranchercd $GOPATH/src/github.com/ranchergit clone https://github.com/rancher/rancher.gitcd ranchergit checkout v2.2.3-rc9 注1......

深蓝苹果
25分钟前
5
0
7个理由,给你推荐这款“秒杀Excel”的分析神器!

谈到数据分析,自然离不开赖以使用的数据分析工具。 商业智能时代,可用于数据分析的工具有很多,Python、R......还有各式各样的专业工具。其中,Excel也是推荐的比较多的一种,尤其是刚入门...

朕想上头条
38分钟前
5
0
Spring5 源码分析-容器刷新-解析配置类-主流程

上一篇:Spring5 源码分析-容器刷新-invokeBeanFactoryPostProcessors()方法 此篇是上一篇方法中非常非常重要的功能,也是Spring核心功能,完成所有的BeanDefinition注册。 详细的主流程,如...

特拉仔
40分钟前
5
0
Python 3.8.0 正式发布 更新内容

Python是一种跨平台的计算机程序设计语言。是一种面向对象的动态类型语言,最初被设计用于编写自动化脚本(shell),随着版本的不断更新和语言新功能的添加,越来越多被用于独立的、大型项目的...

阮鹏
40分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部