How to create custom full screen modal in Ionic2 -

i want create custom full screen loader component in ionic2. modal div not cover header/navbar area. want ionic loadingcomponent covering in app , have template variable. please have @ image.

my modal css is

#modal{   width: 100%;   height:100%;   position: absolute;   z-index: 100;   background: red;   top: 0px;   left: 0; } 

please help.

edit modalpage has navbar

<ion-header> <ion-navbar primary>     <button menutoggle>       <ion-icon name="menu"></ion-icon>     </button>     <ion-title>hello ionic</ion-title>   </ion-navbar> </ion-header> 

edit

i found workaround this. use ionic2 popover, popover gives 100% width+height, full screen. called modal popover on button click , dismiss on 100% download.

you don't need style rule make modal fullscreen. please take @ this plunker.

like can se there, homepage contains navbar, modalpage html code just

<ion-content></ion-content> 

with that, , changing background-color

ion-page.modal-page ion-content {   background-color: red; } 

the modal should fullscreen, without showing navbar.