To open popup modal based on the box position

Question

I want the popup modal opening where the box is.For the top 2 boxes placed the modal opens correctly, I was trying for the last 2 boxes placed at bottom as well.

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

I tried adding offsetop but then the modal is placed at the bottom.

Reproducible stackblitz https://stackblitz.com/edit/angular-pbxxgr?file=src/app/app.component.scss

Without adding any top value(works for top 2 boxes) (Same expectation is for the bottom 2 boxes) https://stackblitz.com/edit/angular-ufwotn?file=src/app/app.component.ts

I want similar kind of behaviour as happening for 1st 2 boxes, whenever I hover for the bottom 2 boxes the modal is opening from top near to the 1st 2 boxes, whereas the expectation is till wherever I have scrolled then from there top of the screen the modal should open

Answer 1

try to use your variable with getBoundingClientRect, little example, change:

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

to

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