Backdrop example


i am new to ionic. so this question many may find very basic. does you have a demo of backdrop and some detailed explanation how it works. more detailed than the docs …$ionicBackdrop/. if not a demo any other references would also be great. thanks friends.


Here’s a nice simple demo, taken from our docs.


what are they used for. … other than dim / darken which could be used when there is some processing going on, and the controls on the screen needs to be disabled. are there any other common uses.
thanks for the respose … this is helpful.

how do i access this demo on the docs.


What they’re used for is entirely up to you.
We use the backdrop in ionic when we want to show a loading indicator as well.$ionicLoading/

The demo above is one I made, so it won’t be include in the docs.


+1 for a visual representation on the docs for some of these Ionic features. I too wondered what on earth a ‘Backdrop’ actually did, and the documentation didn’t really explain the details. I incorrectly assumed that it allowed us to use a wallpaper effect of some sort.

While on the subject, I assume that the $ionicLoading() call already includes Backdrop within it, as it has a similar effect.

Ionic docs mentioned that it is more efficient to create the Backdrop once, then reuse multiple times in the app as needed. I was wondering if the same principle applied to $ionicLoading() ?? i.e. create a loading indicator once in global space, then reuse it multiple times as needed on different views? (speaking in terms of memory management and garbage collection etc.).


Hi @mhartington,

Could you please show how to close a $ionicBackdrop by clicking on it? And, also chaning the Z-index(=11) of backdrop doesn’t help to bring floating action button(zidex=20) on the top? Floating action button goes below backdrop always.

Any help would be highly appreciated.

Thank you!


I would +1 this for sure @naveenkarippai1. I also have this problem where I have an element I want to appear on top of $ionicBackdrop. The element (a password reset window in a div) always appears behind the $ionicBackdrop, regardless of its z-index. Right now, the z-index is set to 999999 !important, and it still has no effect in relation to the backdrop. Any ideas??



Hi @mhartington,

Thanks for the codepen but could you show how to bring a button element above/top of backdrop? Setting z-index of button doesn’t help! And,also closing a backdrop doesn’t seem to work from . Could you please help on that.


Thats not really the purpose of the backdrop to be honest. A Loading component may be a better fit


@mhartington Could you please suggest what component would fit for this purpose then?


$ionicLoading would be a better fit


Hi @mhartington,

$ionicLoading disable other elements on DOM? I wanted to open $ionicLoading on a button click and the same button should be displayed above $ionicLoading (but setting z-index doesn’t work) . Also, button cannot be clicked when $ionicLoading is active . it’s disabled?

Inspecting DOM , there is a backdrop rendered when $ionicLoading is shown. So, could you please show how to proceed on this issue.

Here is a codepen: $ionicLoading


Naveen. I dont think that’s going to work unless your button is a direct child of body.

since the backdrop container is appended to the body, you wont be able to just set z-index in say a content div. Not sure if you could make that work with the ionic backdrop


Hi @djett,

What could be a possible workaround?


With using ionic directives such as navbar / content etc im not sure there is a workaround. Because even if you create your own backdrop at the content level, it wont hide the navBar.

I created a filterDirective in which the filter contain included a child div that served as the backdrop, and I controlled showing/hiding the backdrop etc… but that was appended to the body, rather than content inside ion-content.


Could you please share a codepen?


Take a look at this file, The template is in javascript since the directive is compiled at runtime from the filterBar service (similar to how actionSheet works). But here is where I handle clicks/swipes on the backdrop and call the service to show/hide. there is also a filterBar.scss file that has styling for the backdrop.



Good job. It would be really great if you could throw a codepen :wink: I’m trying to play around with it


I havent looked into using my forked repo as a library, im sure it can probably be done, just havent gotten around to it. If I get some time to take a stab at it and can import my forked repo as a codepen lib, then I can throw something together pretty quick