❮ Ionic Tab Ionic Checkbox ❯

Ionic Backdrop Layer

We often need to show or hide the backdrop layer on the UI, such as in pop-up boxes, loading boxes, or other overlay layers.

In the component, you can use $ionicBackdrop.retain() to display the backdrop layer and $ionicBackdrop.release() to hide it.

Each call to retain will keep the backdrop displayed until release is called to remove the backdrop layer.

Example

HTML Code

<body ng-app="starter" ng-controller="actionsheetCtl">
    <ion-pane>
        <ion-content>
            <h2 ng-click="action()">$ionicBackdrop</h2>
        </ion-content>
    </ion-pane>
</body>

JavaScript Code

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

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

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

    $scope.action = function() {
       $ionicBackdrop.retain();
       $timeout(function() {    // Default to make it disappear after 1 second
         $ionicBackdrop.release();
       }, 1000);
    }; 
}])

Try it »

The display effect is shown in the image below:

❮ Ionic Tab Ionic Checkbox ❯