title: How to create custom full screen modal in Ionic2
body: <p>I want to create custom Full screen Loader component in Ionic2. But my modal div do not cover the header/navbar area. I want it to be like Ionic LoadingComponent covering everything in my app and also have my template variable. Please have a look at image.</p>
  
  <p><a href="https://i.stack.imgur.com/bDiY1.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bDiY1.jpg" alt="enter image description here"></a></p>
  
  <p>My modal css is</p>
  
  <pre><code>#modal{
    width: 100%;
    height:100%;
    position: absolute;
    z-index: 100;
    background: red;
    top: 0px;
    left: 0;
  }
  </code></pre>
  
  <p>Please help.</p>
  
  <p>EDIT
  My ModalPage has navbar</p>
  
  <pre><code>&lt;ion-header&gt;
  &lt;ion-navbar primary&gt;
      &lt;button menuToggle&gt;
        &lt;ion-icon name="menu"&gt;&lt;/ion-icon&gt;
      &lt;/button&gt;
      &lt;ion-title&gt;Hello Ionic&lt;/ion-title&gt;
    &lt;/ion-navbar&gt;
  &lt;/ion-header&gt;
  </code></pre>
  
  <p>EDIT</p>
  
  <p>I found a workaround for this. I just use Ionic2 Popover, Popover gives 100% width+height, full screen. I called the modal popover on button click and dismiss it on 100% download.</p>