弹出在 HTML 元素的末尾

Question

我正在构建带有会话超时示例 (ng-idle) 的 angular 4 应用程序，当用户不进行任何活动时，我会在其中呈现弹出窗口（引导程序 3）。

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

当这个标志this.isIdleState = true时，它正在弹出。

问题是弹出显示在 Angular 应用程序的 HTML 元素的末尾。

而根据引导文档，它应该出现在 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>

app.compoenent.html 中的 Html 代码，以便 pop 在每个组件上都可用。

它的出现方式是 Pop showing after elements

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

Answer 1

由于您的模态窗口在按钮单击时未打开。您必须使模态可见才能执行此操作尝试提供内联 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>

Answer 2

您的模态中似乎没有 modal fade 类父 div。

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

尝试使用模态淡入淡出添加父 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>