Hello Readers,

In this post we will discuss to generate popup on click on button using $ionicPopup service in ionic framework.

Basically, Usage of popup windows in application is to guide the user to what to do next?

$ionicPopup provides some built in methods which allows to create popup with custom content and look.

These functions are alert(), prompt(),confirm().

• First of all we need to create an ionic project.
• Now we have to inject $ionicPopup into our controller.

Now we will use built in functions to generate popup.

• alert(option) : A simple popup window with message and a button. User Click on the button to close the popup.

For Example:

index.html

<ion-view>
    <ion-content>
        <div class="row">
            <div class="col col-100">
                <button class="button button-block  button-balanced" ng-click="alert()">
                   Alert
                </button>
            </div>
        </div>
    </ion-content>
</ion-view>

controller.js

$scope.alert = function() {
     var alertPopupWindow = $ionicPopup.alert({
         title: 'Welcome!',
         template: 'I am an IonicPopup alert.'
     });

     alertPopupWindow.then(function(res) {
        alert('thank you for closing me');    
     });
};

• prompt(options) : A simple prompt popup,It has an input field with two buttons "OK" and "Cancel". If user clicked on OK button, he will get value from input box and get undefined when clicked cancel.

For example:

index.html

<ion-view>
    <ion-content>
        <div class="row">
            <div class="col col-100">
                <button class="button button-block  button-balanced" ng-click="showPrompt()">
                   Prompt window
                </button>
            </div>
        </div>
    </ion-content>
</ion-view>

controller.js

$scope.showPrompt = function() {
    $ionicPopup.prompt({
        title: 'Welcome Users...!',
        template: 'Enter your User name',
        inputType: 'text',
        inputPlaceholder: 'User Name'
    }).then(function(res) {
        console.log('user name is:', res);
    });
};

• confirm(options): A simple confirm popup with two buttons 'OK' and 'Cancel'. If user clicks on OK button it will give true and when clicks on Cancel then givens false.

For Example:

index.html

<ion-view>
    <ion-content>
        <div class="row">
            <div class="col col-100">
                <button class="button button-block  button-balanced" ng-click="confirm()">
                   Confirm
                </button>
            </div>
        </div>
    </ion-content>
</ion-view>

controller.js

$scope.confirm = function() {
        var confirmPopup = $ionicPopup.confirm({
            title: 'Please confirm...',
            template: 'Do you want to remove this file.?'
        });

        confirmPopup.then(function(res) {
            if(res) 
            {
                alert("Deleted");
            } 
            else 
            {
                console.log('You are not sure');
            }
        });
    };

For more information please visit below link:

$ionicPopup

Hope this will help you... :)