Ionic - Javascript Modal

When Ionic modal is activated, the content pane will appear on top of the regular content. Modal is basically larger popup with more functionalities. Modal will cover entire screen by default but it can be optimized the way you want.

Using Modal

There are a two ways of implementing modal in Ionic. One way is to add separate template and the other is to add it on top of the regular HTML file, inside the script tags. The first thing we need to do is to connect our modal to our controller using angular dependency injection. Then we need to create a modal. We will pass in scope and add animation to our modal.

After that, we will create functions for opening, closing, destroying modal. The last two functions are placed where we can write the code that will be triggered if a modal is hidden or removed. If you do not want to trigger any functionality, when the modal is removed or hidden, you can delete the last two functions.

Controller Code

.controller('MyController', function($scope, $ionicModal) {
   $ionicModal.fromTemplateUrl('my-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
   });
});

HTML Code

<script id = "my-modal.html" type = "text/ng-template">
   <ion-modal-view>
      <ion-header-bar>
         <h1 class = "title">Modal Title</h1>
      </ion-header-bar>
  
      <ion-content>
         <button class = "button icon icon-left ion-ios-close-outline"
            ng-click = "closeModal()">Close Modal</button>
      </ion-content>
   </ion-modal-view>
</script>

The way we showed in the last example is when the script tag is used as a container to our modal inside some existing HTML file.

The second way is to create a new template file inside the templates folder. We will use the same code as in our last example, but we will remove the script tags and we also need to change fromTemplateUrl in controller to connect modal with new created template.

Controller Code

.controller('MyController', function($scope, $ionicModal) {
   $ionicModal.fromTemplateUrl('templates/modal-template.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
   });
});

HTML Code

<ion-modal-view>
   <ion-header-bar>
      <h1 class = "title">Modal Title</h1>
   </ion-header-bar>
 
   <ion-content>
      <button class = "button icon icon-left ion-ios-close-outline"
         ng-click = "closeModal()">Close Modal</button>
   </ion-content>
</ion-modal-view>

The third way of using Ionic modal is by inserting HTML inline. We will use the fromTemplate function instead of the fromTemplateUrl.

Controller Code

.controller('MyController', function($scope, $ionicModal) {
   $scope.modal = $ionicModal.fromTemplate( '<ion-modal-view>' +
      ' <ion-header-bar>' +
         '<h1 class = "title">Modal Title</h1>' +
      '</ion-header-bar>' +
  
      '<ion-content>'+
         '<button class = "button icon icon-left ion-ios-close-outline"
            ng-click = "closeModal()">Close Modal</button>' +
      '</ion-content>' +
  
   '</ion-modal-view>', {
      scope: $scope,
      animation: 'slide-in-up'
   })

   $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
   });
});

All three examples will have the same effect. We will create a button to trigger the $ionicModal.show() to open modal.

HTML Code

<button class = "button" ng-click = "openModal()"></button>

When we open modal, it will contain a button that will be used for closing it. We created this button in a HTML template.

There are also other options for modal optimization. We already showed how to use scope and animation. The following table shows other options.

Option	Type	Detail
focusFirstInput	boolean	It will auto focus first input of the modal.
backdropClickToClose	boolean	It will enable closing the modal when backdrop is tapped. Default value is true.
hardwareBackButtonClose	boolean	It will enable closing the modal when hardware back button is clicked. Default value is true.

---