Ionic模态窗口自定义alert

想在弹窗确认按钮中增加倒计时功能，由于原先使用的是AlertControlle，无法在button下的text位置绑定实时参数，因此采用模态窗口重写alert弹框效果。

预期效果

help.png

首先ionic g page xxxx生成新页面，在app.module.ts声明，在原始页面调用：

openModal(){

    const myModal:Modal = this.modalCtrl.create(ModalpagePage, {data:controllStr}, {

     //创建模态页面，并传参

      cssClass: 'custom-modal'

      //cssClass设置弹窗的样式

    });   

    myModal.present();

    myModal.onDidDismiss((newData)=>{

    //带参的回调函数

    });

不想全屏时的样式

.custom-modal {

    background-color: rgba(0, 0, 0, .5) !important;

    transition: opacity .25s ease-in-out;

    padding: 15vh 10vw

} 

模态页面的ts

closeModal(){

//退出函数

  this.view.dismiss();

  }

  ionViewDidLoad(){

  //接收传过来的参数

  this.control =this.navParams.get('data');

    this.verifyCode.disable = false;

  //弹窗的一瞬间就开始计时，倒计时结束才能点击确定按钮

    this.settime();

  }

  ToControl(){

      console.log("you can ");

      this.view.dismiss(this.control);

     //回调传参

  }

  //倒计时

  settime() {

    if (this.verifyCode.countdown == 1) {

      //this.verifyCode.countdown = 10;

      this.verifyCode.verifyCodeTips = "确定";

      this.verifyCode.disable = true;

      return;

    } else {

      this.verifyCode.countdown--;

    }

    this.verifyCode.verifyCodeTips = "倒计时"+this.verifyCode.countdown+"秒";

    setTimeout(() => {

      this.verifyCode.verifyCodeTips = "倒计时"+this.verifyCode.countdown+"秒";

      this.settime();

    },

      1000);

  }

为控制按钮倒计时时无法点击，在<button>中增加 [disabled]="!verifyCode.disable"

最终效果

QQ图片20180321111052.jpg