Popup coming at the end of HTML element

I am building angular 4 app with session time out example (ng-idle) where am rendering pop up (bootstrap 3) when user not doing any activity.

this.idle.onIdleStart.subscribe(() => this.isIdleState = true);

It is rdering pop when this flag this.isIdleState = true.

Problem is pop is showing in end of HTML element of angular application.

Whereas as per bootstrap document it should apper in z-index. For example

https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_modal&stacked=h

<div *ngIf= isIdleState" >
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <h4>Session Timeout warning</h4>
        </div>
        <div class="modal-body">
          you will be timed out in {{countdown}}
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" (click)="reset()">Continue</button>
        </div>
      </div>
    </div>
  </div>
<div>

Html code in app.compoenent.html so that pop will available on every component.

the way it appear is Pop showing after elements

I have tried adding z-index property to pop div but that doesn't work Any help would appreciate.

As your modal window not open on button click.You have to make modal visible to do this try to give inline css display:block; to modal div.

<div *ngIf= isIdleState" >
<div class="modal-dialog modal-sm" style="display:block;">
  <div class="modal-content">
    <div class="modal-header">
      <h4>Session Timeout warning</h4>
    </div>
    <div class="modal-body">
      you will be timed out in {{countdown}}
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-primary" (click)="reset()">Continue</button>
    </div>
  </div>
</div>