博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

ionic popup 做法及样式修改

Posted on 2017-07-18 21:01  lee_xiumei  阅读(1532)  评论(0)    收藏  举报

ionic popup的做法很简单,一共有三种:show、confirm和alert,官网上讲得很详细。

一、confirm:

js:var confirmPopup = $ionicPopup.confirm({
  title: '随便',    //这是标题,样式名称为 popup-head;
  template: '随便写点什么内容啦',    //这是内容主体,样式名 popup-body;
  (templateUrl: 'views/common/myPopup.html',   //这个是完全自定义的popup页面)
  cancelText: '取消',    //取消按钮;
  okText: '确认',    //确认按钮;
  cssClass: 'new-confirm'    //自定义的样式名称,在这个样式名称下修改popup的样式,用以覆盖默认样式。
});
confirmPopup.then(function(res) {
  if(res) {
    //按下确认键后的某些操作;
  } else {
    //按下取消键后的某些操作;
  }
});
 
css:
.newconfirm {
  .popup {
    //这是这个popup的样式名,可以修改popup confim框的大小、背景色等;
  }
  .popup-head {
    //标题样式,如果不想要标题,就用:display: none;
  }
  .popup-body {
    //内容样式,比如字体大小等;
  }

  .popup-buttons {
    //底部按钮的样式;

    .button-default {
      //取消按钮,按钮在左边;
    }
    .button-positive {
      //确认按钮,在右边;
    }
  }
}