How to Style $ionicPopup.alert

ionic-v1
1

Hi,

Please provide steps to style the ionicPopUp.alert.

I would like to add background color of the alert, Button font, button size, seperator color etc…

Thanks,
Venkat.

2

Just use CSS on whatever pop-up element you’re interested in.

.popup-head {
  background-color : blue;
}

.popup-body {
  background-color : red;
}

Sample : http://codepen.io/calendee/pen/Dhpbs

1 Like
3

Thank you, it worked.

4

Hi What if I wish to theme the buttons inline in the popup. Is this possible via JS options?

2 Likes
5

You can do it via CSS:

.popup-buttons
.button:last-child
.button:first-child

You can pretty much style them any way you wish. :wink:

1 Like
6

Yes, is possible using cssClass property! :smiley:

Example:

Popup = $ionicPopup.show({
        title: 'CODE QR:',
        templateUrl: 'templates/codeqr.html',
        scope: $scope,
        cssClass: 'codeQR'
});

My style is:

.codeQR .popup {
    min-width: 80% !important;
    height: 230px;
}

.codeQR .popup-title {
    color: #AAAAAA;
    font-weight: bold;
}

.codeQR .popup-body {
    overflow: inherit !important;
    text-align: center;
    position: relative;
}

.codeQR .btncode {
    position: absolute;
    right: -22px;
    bottom: -20px;
    width: 45px;
    cursor: pointer;
}

And my template of example is:

<qr text="codeQr" size="120"></qr>
<img src="img/close.png" alt="{{ codeQr }}" ng-click="closeModal()" class="btncode" />
<p class="deliverCode">Delivery Code: {{ codeQr }}</p>

Regards, Nicholls

4 Likes
7

quisiera saber cuales son los parametros que puede utilizar dentro de la variable $ionicPopup.alert({
});

porque quiero comprobar mi conexión a Internet si es errónea q me mande a un template de ERROR, bueno es la idea q tengo por ser novato es esto, pero si hay una manera de que mi app no abra hasta q no este conectado a internet, les agradecería la ayuda!!
GRACIAS…!!

8

Check the docs => http://ionicframework.com/docs/v1/api/service/$ionicPopup/