How to Modify ionic popup background at run time

Question

I created a custom popup in ionic if I change the background color of popup class from CSS background color of all other popups is changed. I want to change the background color of only my custom popup.

I am also facing same issue. – Pramod Kharade Jul 13 '16 at 08:47 — Pramod Kharade, Jul 13 '16 at 08:47
how ?its work for you. @the_mahasagar – Yogesh Nikam Jul 15 '16 at 09:08 — Yogesh Nikam, Jul 15 '16 at 09:08

score 2 · Answer 1 · answered Jul 14 '16 at 07:50

2

You can add cssClass to the $ionicPopup.show method:

$ionicPopup.show({
      template: '',
      title: '',
      subTitle: '',
      cssClass: 'myPopup',
      scope: $scope,
      ...

and this class will appear in the generated html as shown here:

answered Jul 14 '16 at 07:50

Ritesh Jagga

1,387
1
11
23

But How to write CSS class which overwrites the system classes – Yogesh Nikam Jul 15 '16 at 09:07
You must be having a css file for your project, there you add this class `.myPopup .popup { background-color: red }`. – Ritesh Jagga Jul 15 '16 at 09:27

score 1 · Accepted Answer · answered Jul 15 '16 at 09:14

i was created custom CSS for my popup in show method like

$ionicPopup.show({
  template: '',
  title: '',
  subTitle: '',
  cssClass: 'myPopup',
  scope: $scope,
  ...

And My Custom CSS is as follows

.myPopup .popup{
    //write your code here
} 

.myPopup .popup-body{
    // Write your css here
}

this was worked for me.

How to Modify ionic popup background at run time

2 Answers2