ionic2\ionic3 自定义弹窗

ionic2及ionic3没有了popup及 其templateUrl属性 那我们如何对弹窗里加入自定义元素 从而达到自定义弹窗样式

那么就可以通过写h5页面来实现 自定义弹窗效果；

写个H5的弹窗及控制其显示、隐藏，再加上animation就完美应用了；

！！！！

但有个新的问题，从底部弹出的窗口h5元素无论怎么设置z-index始终无法盖住tabs栏；

如下解决：

1.如果只是子页面有自定义弹窗：

所有子页面隐藏tabs就可以解决；

可以通过在app.module.ts 写入如下：

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { HttpModule } from '@angular/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MyApp } from './app.component';

@NgModule({
  declarations: [
    MyApp
    ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,           //..引入animation动画模块
    HttpModule,
    IonicModule.forRoot(MyApp,{
    tabsHideOnSubPages:'true'           //,,所有子页面tabs隐藏(一般app都做了)
  })
  ],
     bootstrap: [IonicApp],
  entryComponents: [
    MyApp
],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler,useClass: IonicErrorHandler},HttpServer
  ]
})
export class AppModule {}

2.如果几个tabsRoot页面同样有自定义的H5弹窗：

那么就只有手动隐藏、显示（毕竟弹窗关闭后tabs需要显示）tabs ：

i、自定义tabs显示、隐藏的服务

　　项目根目录下 新建自定义服务文件夹providers并

　　provides文件夹下新建tabs-servers.ts：

　　内容如下：

　　

import {Injectable} from '@angular/core';  

// Declare TabsService as a provider in app.module.ts
// Inject TabsService in your class: constructor(public tabs: TabsService){}
// Use the this.tabs.hide() or this.tabs.show() methods wherever you want
@Injectable()
export class TabsServer {   //该服务类名TabsServer
  constructor() {}
  public hide() {  //隐藏tabs的方法（函数）
    let tabs = document.querySelectorAll('.tabbar'); //选择所有的.tabbar并赋给tabs
    let footer = document.querySelectorAll('.footer');
    let scrollContent = document.querySelectorAll('.scroll-content');
    if (tabs !== null) {  //当tabs存在时，如隐藏了tabs就===null
      Object.keys(tabs).map((key) => {
        tabs[key].style.display = 'none';   //隐藏tabs 这时就是null~~~
      });

      // fix for removing the margin if you got scorllable content
      setTimeout(() =>{
        Object.keys(scrollContent).map((key) => {
          scrollContent[key].style.marginBottom = '0'; //使content默认marginBoottom清零
        });
        Object.keys(footer).map((key) => {
          footer[key].style.bottom = '0px';    //使footer默认bootom清零
        });
      },10)        //10毫秒后运行
    }
  }
  public show() {
    let tabs = document.querySelectorAll('.tabbar');
    let footer = document.querySelectorAll('.footer');
    let scrollContent = document.querySelectorAll('.scroll-content');
    if (tabs !== null) {
      Object.keys(tabs).map((key) => {
        tabs[key].style.display = 'flex'; //显示tabs
      });
    }
    // fix for removing the margin if you got scorllable content
      setTimeout(() =>{
        Object.keys(scrollContent).map((key) => {
          scrollContent[key].style.marginBottom = '43px';//根据定义的tabs高度来定 (我有在app.scss自定义tabs的高度)
        });
        Object.keys(footer).map((key) => {
          footer[key].style.bottom = '43px';//根据定义的tabs高度来定 (我有在app.scss自定义tabs的高度，未定义的可以浏览器查看)
        });
      },10)

  }
}

　　

ii、将TabsServer载入到app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { HttpModule } from '@angular/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MyApp } from './app.component';

import {TabsServer} from '../providers/tabs-server';   //导入TabsServer

@NgModule({
  declarations: [
    MyApp
    ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,           //..引入animation动画模块
    HttpModule,
    IonicModule.forRoot(MyApp,{
    tabsHideOnSubPages:'true'           //,,所有子页面tabs隐藏(一般app都做了)
  })
  ],
     bootstrap: [IonicApp],
  entryComponents: [
    MyApp
],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler,useClass: IonicErrorHandler},HttpServer,TabsServer   //写到这儿
  ]
})
export class AppModule {}

　　

iii、在Home页面实现自定义弹窗

import { Component} from '@angular/core';
import {TabsServer} from '../../providers/tabs-server';

@Component({
  selector: 'page-home',
  template: `
    <ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>
<ion-content >
    我是content,我要显示这个自定义的弹窗
    <button ion-button full (click)="showMypopup('1')">显示自定义弹窗<button>
</ion-content>

<!--myPopup1-->
  <!--我的遮罩层1-->
<span *ngIf="showBackdrop1" class="backdropBar">
<ion-backdrop disable-activated role="presentation" (click)="backdrop('1')" ></ion-backdrop>
<div class="MyPopup">
<!--弹窗内容-->
  <!--close 关闭弹出层  关闭按钮自定义-->
  <div class="CloseBox">
    <ul class="relate">
      <li class="garden">
        <span class="close" (click)="closeTap('1')"></span>
        </li>
    </ul>
  </div>
  <ion-scroll scrollY="true" class="popContent">
    <!--content--说明：用scrol 可以向里面添加无限内容-->
    <div >只想在弹窗窗口添加列表信息！</div>
    <div >只想在弹窗窗口添加列表信息！</div>
    <div >只想在弹窗窗口添加列表信息！</div>
    <div >只想在弹窗窗口添加列表信息！</div>
  　<!--content===end-->
</ion-scroll>
</div>
</span>
<!--myPopup1======end-->
`
})
export class HomePage {
   private showBackdrop1:boolean=false;//声明显、隐弹窗判断，初始隐藏弹窗
   private showBackdrop2:boolean=false;//声明显、隐弹窗判断，初始隐藏弹窗
   constructor(public:tabsserver:TabsServe){} //注入依赖TabsServer

//显示蒙版===打开弹窗==
showMypopup(L){
    this.tabsserver.hide(); //隐藏tabs
  switch(L){
    case '1':{
      this.showBackdrop1=true;  //显示蒙版1
      break;
    }
    case '2':{
      this.showBackdrop2=true; //显示蒙版2
      break;
    }
    //....扩展多个自定义弹窗
}

//显示蒙版===end==

//关闭蒙版--关闭弹窗
backdrop(n){
  this.tabsserver.show();  //显示tabs
  switch(n){
    case '1':{
      this.showBackdrop1=false; //隐藏蒙版1
      break;
    }
    case '2':{
      this.showBackdrop2=false; //隐藏蒙版2
      break;
    }
    //....扩展多个自定义弹窗
  }
}

closeTap(m){
  this.backdrop(m);
  if(m=="1"){
   //..更多的判断
    console.log('弹窗1关闭了');
  }
}
//关闭蒙版====end=====

}

vi:在home.scss写自定义弹窗样式

page-home{
    ion-content{
    //蒙版
    .backdropBar{
        position:fixed;
        width:100%;
        height:100%;
        z-index:8000;
        ion-backdrop{
            opacity:1.0;
            background-color:rgba(0,0,0,0.56);
            z-index: 8001;
        }
        //Mypopup
        .MyPopup{
            position: absolute;
            color: $clr666;
            bottom: 0;
            left: 0;
            width:100%;
            height:84%;
            background-color:$clrPopBC;
            z-index: 8002;
            //弹窗内容
            //scrooll-content
            .popContent{
                width:100%;
                min-height:100%;
            }
             //close
            .CloseBox{
                position:relative;
                width:100%;
                height:25px;
                top:0;
                left:0;
                z-index: 8003;
                .relate{
                    position:absolute;
                    width:50px;
                    height:50px;
                    left:50%;
                    top:0;
                    margin-top:-25px;
                    margin-left:-25px;
                    z-index: 8003;
                    background-color:$clrPopBC;
                    border-radius: 50%;
                    padding:8px;
                    .garden{
                        float: left;
                        position:relative;
                        top:0;
                        left:0;
                        width:34px;
                        height:34px;
                        border-radius: 50%;
                        background-color:$clrf00;
                        line-height: 34px;
                        overflow: hidden;
                        .close{
                            display: block;
                            position:absolute;
                            left:0;
                            top:0;
                            width:34px;
                            height:34px;
                            padding:10%;
                            &::before{
                            content:"";
                            position:absolute;
                            top:50%;
                            left:15%;
                            width:70%;
                            height:0px;
                            margin:auto;
                            border-bottom: 2px solid $clrfff;
                            transform: rotate(45deg);
                            }
                            &::after{
                            content:"";
                            position:absolute;
                            top:50%;
                            left:15%;
                            width:70%;
                            height:0px;
                            margin:auto;
                            border-bottom: 2px solid $clrfff;
                            transform: rotate(-45deg);
                            }
                        }
                       //close==end=
                    }
                  //garden==end=
                }
               //relate==emd=
            }
            //CloseBox===end===
         }
      }
 
    }
} 
 

　　这样就ok了！

总结：

虽然我写的是弹窗，其实是自定义的页面内的底部弹出层\页面+蒙版（没加动画），不过可以看出其实ionic2\ionic3在写法上是相当的便利；通过以上方法可实现意想不到地页面组合效果。