Ionic - Javascript Backdrop

The Ionic Backdrop will overlay the content of the screen when applied. It will appear below other overlays (popup, loading, etc...). There are two methods that can be used for managing backdrop service. The $ionicBackdrop.retain() will apply backdrop over the components, and $ionicBackdrop.release() will remove it.

Using Backdrop

The following example shows how to use backdrop. We are adding $ionicBackdrop as a dependency to the controller, then creating the $scope.showBackdrop() function that will call the retain methodimmediately. Then, after three seconds, it will call the release method. We are using $timeout for the release method, so we need to add it as a controller dependency too.

.controller('myCtrl', function($scope, $ionicBackdrop, $timeout) {

   $scope.showBackdrop = function() {
      $ionicBackdrop.retain();
  
      $timeout(function() {
         $ionicBackdrop.release();
      }, 3000);
   };
})

You will notice how the screen is darker in the following image, since the backdrop is applied.