How to Style $ionicPopup.alert


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…


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

.popup-head {
  background-color : blue;

.popup-body {
  background-color : red;

Sample :

1 Like

Thank you, it worked.

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


You can do it via CSS:


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

1 Like

Yes, is possible using cssClass property! :smiley:


Popup = ${
        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


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!!

Check the docs =>$ionicPopup/