根据框的位置打开弹出模式 [英] To open popup modal based on the box position

问题描述

我想要框所在的弹出模态开口.对于顶部2个放置正确的模态框，我也尝试将最后2个框也放置在底部.

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'
};

我尝试添加offsetop，但是模态位于底部.

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

可重现的堆叠闪电战 https://stackblitz.com/edit/angular- pbxxgr?file = src/app/app.component.scss

Reproducible 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

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

我想要与第一2个框类似的行为，每当我将鼠标悬停在最底部的2个框上时，模态就会从顶部靠近第一2个框打开，而期望值一直到我滚动到那个位置然后从顶部开始屏幕上的模态应该打开

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

推荐答案

尝试将变量与getBoundingClientRect一起使用，小示例，请更改:

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

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

到

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

这篇关于根据框的位置打开弹出模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！