Popup coming at the end of HTML element

Question

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.

Do you want the model to be appeared in middle of the screen on top of the elements? — UI_Dev, Jul 22 '19 at 03:30
@UI_Dev I want modal to appear at top of element. As shown in this example : https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_modal&stacked=h — asksharmadeepak, Jul 22 '19 at 05:55

score 1 · Accepted Answer · answered Jul 22 '19 at 11:29

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>

score 0 · Answer 2 · answered Jul 22 '19 at 03:35

Looks like you don't have modal fade class parent div in your modal.

Bootstrap modal will automatically fade the background and open up the modal.

Try to add the parent div with modal fade and give model id as shown below.

<div class="modal fade" id="modelID" role="dialog">
  <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>

And, add data-target with same model ID and data-toggle attributes to the button as below

 <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#modeID">Open Modal</button>

My Modal window does not invoke based in button click , it will appear when this `
` condition is true. I have used ``` modal fade``` but after using it the modal window not coming at all. — asksharmadeepak, Jul 22 '19 at 05:58

Popup coming at the end of HTML element

2 Answers2