title: Session Time out modal hides behind the already opened Dialog
body: <p>This is Angular4 with Bootstrap4 application, I have session timeout Modal which works fine if another modal is open (it displays on top of the second modal) but the issue is if a dialog box is open, session timeout modal is displayed behind the dialog box. I have already set the z-index of session timeout modal to 99999 !important and the dialog box z-index to very less value, still the issue exists. I know this is CSS Styling issue? What else I missed? I want the Session timeout modal to display on top of the Dialog box</p>
  
  <h2>Below is the code for the dialog box</h2>
  
  <pre><code>&lt;div class= "row"&gt;
      &lt;dialog id="d1"&gt;            
      &lt;/dialog&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2>CSS:</h2>
  
  <pre><code> dialog#d1 {
              top:50px;
              width: 200px;
              height: 300px;
              z-index: 5;  
              position: fixed;      
          }  
  </code></pre>
  
  <p>Below is the plunk code for sessionTimeout modal example, DialogService will invoke the session timeout modal when timeout is reached
  [<a href="https://embed.plnkr.co/plunk/4ey4Mn][1]" rel="nofollow noreferrer">https://embed.plnkr.co/plunk/4ey4Mn][1]</a> </p>
  
  <h2>Css set for Modal is</h2>
  
  <pre><code>.custom-show {
      z-index: 99000 !important;
  }
  </code></pre>