弹出窗口出现在 HTML 元素的末尾

Question

我正在构建 angular 4 个带有会话超时示例 (ng-idle) 的应用程序，其中在用户未执行任何操作时弹出渲染 (bootstrap 3) activity。

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

当这个flag this.isIdleState = true.

时它正在rdering pop

问题是 pop 显示在 angular 应用程序的 HTML 元素的末尾。

而根据 bootstrap 文档，它应该出现在 z-index 中。例如

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 app.compoenent.html 中的代码，以便每个组件都可以使用 pop。

它的显示方式是 Pop showing after elements

我已经尝试将 z-index 属性添加到 pop div 但这不起作用任何帮助将不胜感激。

Answer 1

看起来你的模态中没有 modal fade class parent div。

Bootstrap 模态会自动淡化背景并打开模态。

尝试添加带有模态淡入淡出的父项 div 并提供模型 ID，如下所示。

<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>

然后，将具有相同型号 ID 和 data-toggle 属性的 data-target 添加到按钮，如下所示

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

Answer 2

因为你的模态 window 没有在按钮上打开 click.You 必须使模态可见才能做到这一点尝试给内联 css display:block;模态 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>

弹出窗口出现在 HTML 元素的末尾

Popup coming at the end of HTML element

javascript

css

angular

bootstrap-modal

ng-idle