离子弹出自定义

Question

我试图修改弹出的大小。但我没有成功。

我有这个弹出模板：

<ion-view> 
     <ion-content scroll="false" class=""> 
      test 
     </ion-content> 
    </ion-view> 

而且在我的控制器：

$scope.openFilter = function() { 
    var popupFilter = $ionicPopup.prompt({ 
      templateUrl: 'templates/popup-template-filter.html', 
      scope: $scope 
    }) 

    $scope.close = function() { 
     popupFilter.close(); 
    } 
    } 

在我无礼的话，我想这和它的工作：

.popup { 
    width: 100% !important; 
    height: 180px !important; 
    position: fixed !important; 
    bottom: 0 !important; 
} 

但是我有我的项目中有多个弹出窗口，我想单独修改。

我的第二个问题是怎样关闭弹出框？我发现的例子，但没有弹出的可定制的模板

Thankss

Answer 1

在这篇文章中，你可以声明的CSS大师班单独修改您的弹出窗口：

Ionic: how to use cssClass in $ionicPopup?

你只需要做这样的：

.my-custom-popup{ 
    .popup{ 
    //styling for popup width, width: 300px; 
    } 
    .popup-title{ 
    //styling for title 
    } 
} 

，然后这样的：

var popupScore = $ionicPopup.alert({ 

    title:'Score', 
    template: 'Total XP points: 50', 
    cssClass: 'my-custom-popup', 
    buttons: [{ 
    text:'Return', 
    type: 'button-assertive' 
}]}} 

希望它有帮助！

pd。在文档中，它显示了所有你可以添加到您的弹出的属性包括这一个，自定义CSS类：

https://ionicframework.com/docs/api/service/ $ ionicPopup/