Ionic Modal

Ionic Modal: Ionic modal is basically content pane area which appears over the main content view. Ionic modal is popup with rich functionality which provides users more functionality. You can customize the ionic’s default modal easily. In this tutorial we are going to explain the modal functionalities with example and demo. We will also cover how to customize modal such as color background color or size of modal. It’s cool you will definitely love it.

Ionic Modal

<ion-modal-view> is used for creating model. Place content inside the tag <ion-modal-view> and </ion-modal-view> which you want to show in modal. Here is html template and controller for modal script.

Html Template

<script id="test-modal.html" type="text/ng-template">// <![CDATA[
  <ion-modal-view>
    <ion-header-bar>



<h1 class="title">Your Modal title</h1>



    </ion-header-bar>
    <ion-content>
      Hello World!!
    </ion-content>
  </ion-modal-view>
// ]]></script>

Controller Code

Below code contains the function to open a model and close model also code to execute action on events such as on open or on close of modal. Here is full code of controller required for opening and closing a modal.

angular.module('myApp', ['ionic'])
.controller('MyCtrl', function($scope, $ionicModal) {
  $ionicModal.fromTemplateUrl('test-modal.html', {
    scope: $scope,
    animation: 'slide-in-up'
  }).then(function(modal) {
    $scope.modal = modal;
  });
  $scope.openModal = function() {
    $scope.modal.show();
  };
  $scope.closeModal = function() {
    $scope.modal.hide();
  };
  //Cleanup the modal when we're done with it!
  $scope.$on('$destroy', function() {
    $scope.modal.remove();
  });
  // Execute action on hide modal
  $scope.$on('modal.hidden', function() {
    // Execute action
  });
  // Execute action on remove modal
  $scope.$on('modal.removed', function() {
    // Execute action
  });
});

If you run the above example it will produce the following output-

Add Comment

📖 Read More

• 1. Ionic Navigation
• 2. Ionic Popover
• 3. Ionic Popup
• 4. Ionic Scroll
• 5. Ionic Infinite Scroll

• 6. Ionic Side Menus