将 ng-container 内容显示为弹出窗口

Question

如何使下面代码中的此内容在触发时显示为页面上的新弹出窗口，而不是在特定部分中？ 它与z-index有关吗？

谢谢

<ng-container *ngIf="confirmation">
      <div class="check-email">
        <div class="title-email" fxLayout="row" fxLayoutAlign="center center">{{ 'check-email-title' | translate }}</div>
        <div class="sub-title" fxLayout="row" fxLayoutAlign="center center">{{ 'verify-email' | translate }}</div>
        <div class="email-img" fxLayout="row" fxLayoutAlign="center center">
          <img src="assets/img/email-message.png" />
        </div>
        <div fxLayout="row" fxLayoutAlign="center center">
          {{ 'do-not-see-email' | translate }}
        </div>
        <div fxLayout="row" fxLayoutAlign="center center">
          {{ 'check-spam-folder' | translate }}
        </div>
        <div fxLayout="row" fxLayoutAlign="center center">
          <a class="click-resend-email">Click here &nbsp;</a>
          <div>to send the email again</div>
        </div>
      </div>
    </ng-container>

Answer 1

主要的

=======================

首先，您可以给“ng-container”一个position属性，其值为absolute或fixed （取决于您的应用程序），如果它是您的最后一个元素，这将使“ng-container”出现在其他所有内容之上HTML 文件，如果在我正在工作的团队中没有设置任何规则，我通常会这样做，但是，如果由于某种原因你不能把它放在最后，那么你可以使用具有适当值的z-index属性（如果您想涵盖可能已添加z-index的所有其他内容，通常为 1000 之类的高数字）。 [我并不是说将元素添加到最后是最佳实践，但这是我特别为小型项目所做的] 。

其次，使用属性top 、 right 、 left和bottom来调整元素的 position （不需要全部使用）

第三，您可以在开始时将“ng-container”的display属性值指定为none ，并且每当您希望容器出现时，您可以使用Js将display属性的值更改为您想要的任何值。

ng-container {
    display: block; // or any display setting you're using.
    position: fixed; 
    top: 1rem ;    //
    right: 1rem;   // adjust the position as you need. 
    left: 1rem;    //
    bottom: 1rem;  //
}

======================

额外的

---

1 - 您可能希望将整个内容包装在一个容器中以产生某种效果，让用户知道他们需要专注于该元素，例如模糊或变暗弹出窗口后面的所有其他内容，只需您需要包装容器即可分别使用width和hight属性的值100vw和100vh来获得屏幕的全宽和高度， vw和vh用于指定从视口的高度或宽度取多少。

2 - 如果您不想在此弹出窗口中滚动，您可以将 body 的overflow属性更改为hidden的值。

3 - 您可以检测用户是否单击包装器以取消此弹出窗口（如果元素没有占据容器的所有宽度）。