How to use custom css in popup?

I see in the doc of $ionicPopup, there is a property ‘cssClass’ says it for custom css but i don’t know how to use it. I try to put the name of a class into it but nothing happened, could i use it to customize the popup?

try using like


cssClass: ‘yourclass’

.yourclass .popup{ }
.yourclass .popup .popup-head{ }
.yourclass .popup .popup-body{ }

I’ve tried it but it doesn’t work

I was also not able to get it to work, unfortunately. I’m still looking for solutions, but for right now I just had to edit the raw SCSS files and compile those. I think it has it’s own sub less file you can modify. Then you just compile that and it should alter that style, not the best method, but I can’t get anything else to work!

You need to be more specific with the css. Pass the custom class in cssClass:

var myPopup = $ionicPopup.show({
     template: '<input type="password" ng-model="data.wifi">',
     title: 'Enter Wi-Fi Password',
     subTitle: 'Please use normal things',
     scope: $scope,
     cssClass: 'custom-popup'
     ... 
});

Then in the CSS:

.custom-popup.popup-container .popup {
  background-color: green;
}

Codepen example: http://codepen.io/brandyshea/pen/qdORmj

3 Likes

You are a life saver. Thank you!!!

1 Like

I don’t know why it doesn’t work for me. Checking with “inspect element” i don’t see it generates the class “custom-popup”. Does it cause by the version of ionic, i’m using beta13 ?

Yes, it wasn’t introduced in beta 13. You can use the dropdown in the upper left of the docs to see the documentation for that version: http://ionicframework.com/docs/1.0.0-beta.13/api/service/$ionicPopup/

Oh, my bad. Thank you for your help!

1 Like

How do I apply custom css for only one popup. With the above method…the css will reflect in all the pop ups