根据框 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...
}