Vinicius Murad Vinicius Murad - 1 year ago 208
AngularJS Question

Ionic popup customize

I'm trying to modify the size of a pop up. But I'm not having success.

I have this popup template:

<ion-content scroll="false" class="">

And in my controller:

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

$scope.close = function() {

In my Sass,i tried this and it worked:

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

However I have more than one popup in my project, and I would like to individually modify.

And my second question how can I close the popup? I found examples but none of popup with customizable template


Answer Source

In this post, you can declare the css Master Class to modify your popups individually:

Ionic: how to use cssClass in $ionicPopup?

You just have to do this:

    //styling for popup width, width: 300px;
     //styling for title

and then this:

 var popupScore = $ionicPopup.alert({

  template: 'Total XP points: 50',
  cssClass: 'my-custom-popup',
  buttons: [{
  type: 'button-assertive'

Hope it helps!

pd. in the documentation, it shows all the attributes you can add to your popup including this one, custom css class:$ionicPopup/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download