根據框 position 打開彈出模式

Question

我想要盒子所在的彈出模式打開。對於放置的頂部 2 個盒子，模態打開正確，我也在嘗試放置在底部的最后 2 個盒子。

{
 top: 0 + 'px'+ this.el.nativeElement.offsetTop + 'px',
 right: ((window.innerWidth || document.documentElement.clientWidth) - x.left) - 20 + 'px',
 height: 'auto',
 width: 58 + '%',
 display: 'flex'
};

我嘗試添加 offsetop 但隨后模態被放置在底部。

可重現的 stackblitz https://stackblitz.com/edit/angular-pbxxgr?file=src/app/app.component.scss

不添加任何頂部值（適用於頂部 2 個框） （對於底部 2 個框的期望相同） https://stackblitz.com/edit/angular-ufwotn?file=src/app/app.component.ts

我想要與第一個 2 個盒子發生的類似行為，每當我為底部 2 個盒子做 hover 時，模式從頂部靠近第一個 2 個盒子打開，而期望是直到我從那里滾動到屏幕頂部模態應該打開

Answer 1

嘗試將您的變量與 getBoundingClientRect 一起使用，小例子，更改：

this.modelstyle {
    top: 0 + px;
  ...here other your code...
}

至

this.modelStyle {
   top: x.top + window.scrollY + 'px',
...here other your code...
}