離子彈出自定義

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/