<html ng-app="ionic.example">
  <head>
    <meta charset="utf-8">
    <title>Popups</title>

    <!-- Sets initial viewport load and disables zooming  -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
     <link href="https://code.ionicframework.com/nightly/css/ionic.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="https://code.ionicframework.com/nightly/js/ionic.bundle.js?v=1"></script>

  </head>
  <body ng-controller="PopupCtrl" class="padding">
    <button class="button button-dark" ng-click="showPopup()">Multiple</button>
    <button class="button button-primary" ng-click="showConfirm()">Confirm</button>
    <button class="button button-balanced" ng-click="showPrompt()">Prompt</button>
    <button class="button button-assertive" ng-click="showPasswordPrompt()">Password Prompt</button>
    <button class="button button-positive" ng-click="showAlert()">Alert</button>

    <script id="popup-template.html" type="text/ng-template">
      <input ng-model="data.wifi" type="text" placeholder="Password">
    </script>
  </body>
</html>

     angular.module('ionic.example', ['ionic'])

      .controller('PopupCtrl', function($scope, $timeout, $q, $ionicPopup) {
          $scope.showPopup = function() {
            $scope.data = {}

            $ionicPopup.show({
              templateUrl: 'popup-template.html',
              title: 'Enter Wi-Fi Password',
              subTitle: 'WPA2',
              scope: $scope,
              buttons: [
                { text: 'Cancel', onTap: function(e) { return true; } },
                {
                  text: '<b>Save</b>',
                  type: 'button-positive',
                  onTap: function(e) {
                    return $scope.data.wifi;
                  }
                },
              ]
              }).then(function(res) {
                console.log('Tapped!', res);
              }, function(err) {
                console.log('Err:', err);
              }, function(msg) {
                console.log('message:', msg);
              });

            $timeout(function() {
              $ionicPopup.alert({
                title: 'Unable to connect to network'
              }).then(function(res) {
                console.log('Your love for ice cream:', res);
              });
            }, 1000);
          };

          $scope.showConfirm = function() {
            $ionicPopup.confirm({
              title: 'Consume Ice Cream',
              content: 'Are you sure you want to eat this ice cream?'
            }).then(function(res) {
              if(res) {
                console.log('You are sure');
              } else {
                console.log('You are not sure');
              }
            });
          };
          $scope.showPrompt = function() {
            $ionicPopup.prompt({
              title: 'ID Check',
              subTitle: 'What is your name?'
            }).then(function(res) {
              if(res){
                console.log('Your name is');
                } else{
                console.log('Your Name is what?');
                }
            });
          };
          $scope.showPasswordPrompt = function() {
            $ionicPopup.prompt({
              title: 'Password Check',
              subTitle: 'Enter your secret password',
              inputType: 'password',
              inputPlaceholder: 'Your password'
            }).then(function(res) {
              console.log('Your password is', res);
            });
          };
          $scope.showAlert = function() {
            $ionicPopup.alert({
              title: 'Don\'t eat that!',
              content: 'That\'s my sandwich'
            }).then(function(res) {
              console.log('Thank you for not eating my delicious ice cream cone');
            });
          };
      });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.