YouTip

# Ionic Backdrop We often need to show or hide a backdrop layer on the UI, for example, in popups, loading boxes, or other overlay layers. In a component, you can use `$ionicBackdrop.retain()` to show the backdrop layer and `$ionicBackdrop.release()` to hide it. Each time `retain` is called, the backdrop will remain visible until `release` is called to dismiss it. * * * ## Example ### HTML Code

$ionicBackdrop

### 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: !(#)