ionic使用记录----popup

最新推荐文章于 2021-06-03 14:02:25 发布

原创最新推荐文章于 2021-06-03 14:02:25 发布 · 4.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ionic

ionic 专栏收录该内容

9 篇文章

订阅专栏

一个o2o的项目用到居中弹出层，尝试过$ionicModal,$ionicPopover,$ionicpopup

$ionicModal是根据屏幕尺寸来的，小屏幕就全屏覆盖，大屏幕就显示弹出层。

$ionicPopover类似tip框，在某个控件周围弹出小的覆盖层。

ionicpopup类似alert功能，居中并可自定义内容，适合。

$ionicpopup使用：

controller里面写上打开方法和关闭方法。

$scope.showPopup = function() {
    var myPopup = $ionicPopup.show({
        cssClass:'er-popup',
        templateUrl: 'templates/er_modal.html',
        scope: $scope
    });
    myPopup.then(function(res) {

    });
};
在controller可定义css设置内容样式。
.er-popup{

}
/*隐藏头*/
.er-popup .popup-head{
    display: none;
}
/*圆角*/
.er-popup .popup{
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius:5px;
}

 html使用ng-click调用即可打开自定义的弹出层。