1

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

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

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

问题是 pop 显示在 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 在元素之后显示

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

4

2 回答 2

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>

于 2019-07-22T11:29:41.737 回答
0

看起来您的模态中没有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>

并且，在按钮中添加data-target相同的模型 ID 和属性，如下所示data-toggle

 <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#modeID">Open Modal</button>
于 2019-07-22T03:35:52.523 回答