滚动模态，如位置：绝对，但出现在页面上，如位置：固定答案

【问题标题】：Scrolling a modal like position:absolute, but appearing on the page like postion:fixed滚动模态，如位置：绝对，但出现在页面上，如位置：固定
【发布时间】：2023-03-18 13:34:01
【问题描述】：

当我用户点击一个按钮时，我的屏幕上会出现一个 PrimeNG 对话框。

<app-my-modal> [isVisible]="displayModal" [isEdit]="false" (onClose)="hideModalDialog()"></app-my-modal>

<p-dialog
[visible]="isVisible"
[modal]="true"
styleClass="my-modal"
[baseZIndex]="10000"
[draggable]="false"
[resizable]="false"
[closable]="false" >
<p-header>
  {{headerText}}
</p-header>

.my-modal {
width: 500px;
position: absolute;
}

一旦对话框出现，我希望模态框随页面一起滚动。我可以使用 position:absolute 来做到这一点。但是，无论用户在页面中滚动到何处，我都希望模式在弹出时出现在屏幕中间。这似乎很棘手，因为 position:absolute 似乎只关心相对于父组件范围的位置，而我需要 position:fixed 将其放在页面中间。有没有办法同时包含这两种功能？

【问题讨论】：

标签： html css angular css-position primeng

【解决方案1】：

所以我想我会这样做：使用 [positionTop] 映射到 window.scrollY

<p-dialog
[visible]="isVisible"
[modal]="true"
[positionTop]="topPosition | async"
styleClass="my-modal"
[baseZIndex]="10000"
[draggable]="false"
[resizable]="false"
[closable]="false" >
<p-header>
  {{headerText}}
</p-header>

那么我的 JS 就会有类似的东西

  public topPosition = new Subject<number>();

  @HostListener('window:scroll', ['$event'])
  onScroll() {
    this.topPosition.next(window.scrollY + 65);
  }

这似乎效率低下，但它给了我想要的结果。

【讨论】：